@extends('app-new')

@push('head-script')
    <style>
        tr td .form-control {
            padding: 7px 8px;
            min-width: 60px;
            max-width: 60px;
            font-size: 12px;
            color: #000;
        }

        tr td .form-select {
            padding: 7px 8px;
            min-width: 80px;
            max-width: 80px;
            font-size: 12px;
            color: #000;
            background-position: right 0.2rem center;
        }
    </style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Loan</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl }}/loan-rules">Loan Rules</a>
                    </li>
                    <li class="breadcrumb-item active">List
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn btn-outline-primary btn-sm mb-50 mb-sm-0" id="add-new-row"><i data-feather="plus"></i> Add
                New</button>
        </div>
    </div>
@endpush

@section('content')
    <section id="basic-datatable">
        <div class="row">
            <div class="col-12">

                <div class="card">
                    <div class="card-body customernewsection-form">
                        <div id="singleForm">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Share Price
                                    </label>
                                    <input type="number" placeholder="Share Price" id="share_price"
                                        value="{{ @$configData['share_price'] }}" min="0" name="share_price"
                                        class="form-control" />
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Emi Skip Method<span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select" id="emi_skip_method" name="emi_skip_method">
                                        @foreach ($emiSkipMethods as $emiSkipMethod)
                                            <option value="{{ $emiSkipMethod['id'] }}"
                                                {{ @$configData['emi_skip_method'] == $emiSkipMethod['id'] ? 'selected' : '' }}>
                                                {{ $emiSkipMethod['name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <button type="button" id="singleFromSbmtBtn" class="btn btn-primary btn-sm mt-2  "><i
                                            data-feather="check-circle"></i> Submit</button>
                                </div>
                            </div>
                        </div>

                        <div class="my-2"></div>
                        <div>
                            <div class="step-custhomapp bg-light">
                                <ul class="nav nav-tabs my-25 custapploannav" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#payment">Advance/Loan
                                            Rule</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-content pb-1">
                                <div class="tab-pane active" id="payment">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive pomrnheadtffotsticky">
                                                <table
                                                    class="table myrequesttablecbox table-striped po-order-detail custnewpo-detail border newdesignerptable newdesignpomrnpad">
                                                    <thead>
                                                        <tr>
                                                            <th>Mapping Type</th>
                                                            <th>Mapping To</th>
                                                            <th>Tenure</th>
                                                            <th>Based on</th>
                                                            <th>Heads</th>
                                                            <th>X Times</th>
                                                            <th>Amount</th>
                                                            <th>Emi Rule</th>
                                                            <th>Rate of Int.</th>
                                                            <th>Type of Loan</th>
                                                            <th>Repayment Type</th>
                                                            <th>Interest Type</th>
                                                            <th>EMI Type</th>
                                                            <th>Deduct From</th>
                                                            <th>Cooling Peroid</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="mrntableselectexcel" id="loan-rules-tbody">

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>

    <script>
        let srNo = 0;
        let loanRules = @json($loanRules);
        let mappingTypes = @json($mappingTypes);
        let payrollComponents = @json($payrollComponents);
        let loanTypes = @json($loanTypes);
        let departments = [];
        let designations = [];
        let employees = [];
        let repaymentTypes = @json($repaymentTypes);
        let payrollCompontTypes = @json($payrollCompontTypes);
        let basedOnTypes = @json($basedOnTypes);
        let emiRules = @json($emiRules);
        let interestTypes = @json($interestTypes);
        let emiTypes = @json($emiTypes);

        $(document).on('change', '.mapping-types', function(e) {
            let rowNumber = $(this).data('row');
            let type = $(this).val();

            updateTypeId(type, rowNumber);
        });

        $(document).on('change', '.based_on', function(e) {
            let rowNumber = $(this).data('row');
            updateFieldVisibility(rowNumber);
        });

        $('#singleFromSbmtBtn').click(function() {
            submitSingleForm();
        });

        $(document).on('change', '.emi_rule', function(e) {
            let rowNumber = $(this).data('row');
            updateRateOfInterest(rowNumber);
        });

        $(function() {
            loadReferenceData(() => {
                if (loanRules.length) {
                    loanRules.forEach(element => {
                        addNewRow(element);
                    });
                } else {
                    addNewRow();
                }
            });
        });

        $('#add-new-row').click(function() {
            addNewRow();
        });

        $(document).on('click', '.delete-row', function() {
            let rowNumber = $(this).data('row');
            let id = $(this).data('row-id');
            deleteRow(rowNumber, id);
        });

        function addNewRow(loanRule) {
            let rowNumber = srNo++;
            let html = renderSingleRowHtml(rowNumber, loanRule);
            $('#loan-rules-tbody').append(html);

            if (loanRule?.type) {
                updateTypeId(loanRule?.type, rowNumber);
            }

            renderSelect2(".select2");
        }

        function renderSelect2(selector) {
            $(selector).select2({
                placeholder: "Select",
            });
        }

        function deleteRow(rowNumber, id) {
            Swal.fire({
                title: "Alert! ",
                text: "Are you sure you want to delete ?",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, please!",
            }).then((result) => {
                if (result.value) {
                    if (id) {
                        const formData = new FormData();
                        formData.append('id', id);

                        apiRequest('{{ $orgUrl }}/loan-rules', formData, null, 'DELETE',
                            function(res) {
                                Swal.fire('Success!', res.message, 'success');
                                removeRow(rowNumber);
                            }
                        );
                    } else {
                        removeRow(rowNumber);
                    }

                }
            });
        }

        function removeRow(rowNumber) {
            $(`#single-row-${rowNumber}`).remove();
        }

        function renderSingleRowHtml(rowNumber, loanRule = null) {
            let html = `
                <tr class="single-row" id="single-row-${rowNumber}">
                    <td>
                        <input type="hidden" name="id" value="${loanRule?.id ?? ''}">
                        <div style="width: 300px">
                            <select class="form-select select2 mw-100 mapping-types" data-row="${rowNumber}" name="type">
                                <option value="">Select</option>
                                ${renderOptions(mappingTypes, loanRule?.type)}
                            </select>
                        </div>
                    </td>
                    <td>
                        <div style="width: 300px">
                            <select class="form-select select2 mw-100" id="mapping-types-${rowNumber}" name="type_id[]" data-selected="${loanRule?.mappings?.map(item => item.type_id)}" multiple>
                            </select>
                        </div>
                    </td>
                    <td><input type="text" class="form-control mw-100" name="tenure" value="${loanRule?.tenure ?? ''}" /></td>
                    <td>
                        <select class="form-select mw-100 based_on" id="based_on_${rowNumber}" data-row="${rowNumber}" style="width: 100px" name="based_on">
                            <option value="">Select</option>
                            ${renderOptions(basedOnTypes, loanRule?.based_on)}
                        </select>
                    </td>
                    <td>
                        <div style="width: 300px">
                            <select class="form-select select2 mw-100 component_id" id="component_id_${rowNumber}" name="component_id[]" multiple ${loanRule?.based_on == 'amount' || loanRule?.based_on == 'shares'  ? 'disabled' : ''}>
                                ${renderOptions(payrollComponents, loanRule?.components?.map(item => item.component_id))}
                            </select>
                        </div>
                    </td>
                    <td><input type="text" class="form-control mw-100 times" id="times_${rowNumber}" name="times" value="${loanRule?.times ?? ''}" data-row="${rowNumber}" ${loanRule?.based_on == 'amount' ? 'disabled' : ''} /></td>
                    <td><input type="text" style="width: 150px" class="form-control mw-100 amount" id="amount_${rowNumber}" name="amount" value="${loanRule?.amount ?? ''}" ${loanRule?.based_on == 'component' || loanRule?.based_on == 'shares' ? 'disabled' : ''}/></td>
                    <td>
                        <select class="form-select mw-100 emi_rule" id="emi_rule_${rowNumber}" data-row="${rowNumber}" name="emi_rule">
                            <option value="">Select</option>
                            ${renderOptions(emiRules, loanRule?.emi_rule)}
                        </select>
                    </td>
                    <td><input type="text" class="form-control mw-100 interest_rate" id="interest_rate_${rowNumber}" data-row="${rowNumber}" name="interest_rate" value="${loanRule?.interest_rate ?? ''}" ${loanRule?.emi_rule == 'without_interest' ? 'disabled' : ''}/></td>
                    <td>
                        <div style="width: 300px">
                            <select class="form-select select2 mw-100" name="loan_type[]" multiple>
                                ${renderOptions(loanTypes, loanRule?.loan_types?.map(item => item.loan_type))}
                            </select>
                        </div>
                    </td>
                    <td>
                        <select class="form-select mw-100" name="repayment_type">
                            <option value="">Select</option>
                            ${renderOptions(repaymentTypes, loanRule?.repayment_type)}
                        </select>
                    </td>
                    <td>
                        <select class="form-select mw-100" name="interest_type" id="interest_type_${rowNumber}" ${loanRule?.emi_rule == 'without_interest' ? 'disabled' : ''}>
                            <option value="">Select</option>
                            ${renderOptions(interestTypes, loanRule?.interest_type)}
                        </select>
                    </td>
                    <td>
                        <select class="form-select mw-100" name="emi_type" id="emi_type_${rowNumber}" ${loanRule?.emi_rule == 'without_interest' ? 'disabled' : ''}>
                            <option value="">Select</option>
                            ${renderOptions(emiTypes, loanRule?.emi_type)}
                        </select>
                    </td>
                    <td>
                        <select class="form-select mw-100" name="deduct_from">
                            <option value="">Select</option>
                            ${renderOptions(payrollCompontTypes, loanRule?.deduct_from)}
                        </select>
                    </td>
                    <td><input type="text" class="form-control mw-100" name="cooling_period" value="${loanRule?.cooling_period ?? ''}" /></td>
                    <td>
                        <div class="d-flex">
                            <button type="button" class="btn btn-icon rounded-circle btn-outline-primary waves-effect me-1" id="update1973" title="Update" onclick="submitSingleRow(${rowNumber})"><i class="edit" data-feather="edit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></i></button>
                            <button type="button" class="btn btn-icon rounded-circle btn-outline-danger waves-effect delete-row" title="Delete" data-row="${rowNumber}" data-row-id="${loanRule?.id ?? ''}"><i class="trash" data-feather="trash"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></i></button>
                        </div>
                    </td>
                </tr>
            `;

            return html;
        }

        function renderOptions(data, selectedKey = '') {
            return data.map(item => {
                let selected = '';

                if (Array.isArray(selectedKey) && selectedKey.some(val => val == item.id)) {
                    selected = 'selected';
                } else if (selectedKey == item.id) {
                    selected = 'selected';
                }

                return `<option value="${item.id}" ${selected}>${item.name}</option>`
            }).join('');
        }

        function submitSingleRow(rowNumber) {
            apiRequest('{{ $orgUrl }}/loan-rules', null, `#single-row-${rowNumber}`, 'POST',
                function(res) {
                    Swal.fire('Success!', res.message, 'success');
                }
            );
        }

        function submitSingleForm() {
            apiRequest('{{ $orgUrl }}/loan-rules/configurations', null, `#singleForm`, 'POST',
                function(res) {
                    Swal.fire('Success!', res.message, 'success');
                }
            );
        }

        function updateTypeId(type, rowNumber) {
            let data = [];

            switch (type) {
                case 'department':
                    data = departments;
                    break;
                case 'designation':
                    data = designations;
                    break;
                case 'employee':
                    data = employees;
                    break;
            }

            let selectedData = $(`#mapping-types-${rowNumber}`).data('selected');
            if (selectedData) selectedData = selectedData.toString().split(',');

            $(`#mapping-types-${rowNumber}`).data('selected', '')
            $(`#mapping-types-${rowNumber}`).val('');
            $(`#mapping-types-${rowNumber}`).html(renderOptions(data, selectedData));
            renderSelect2(`#mapping-types-${rowNumber}`);
        }

        function updateFieldVisibility(rowNumber) {
            let basedOn = $(`#based_on_${rowNumber}`).val();

            if (basedOn == 'amount') {
                $(`#amount_${rowNumber}`).removeAttr('disabled');

                $(`#component_id_${rowNumber}`).val('').attr('disabled', true);
                $(`#times_${rowNumber}`).val('').attr('disabled', true);
            } else if (basedOn == 'shares') {
                $(`#amount_${rowNumber}`).val('').attr('disabled', true);
                $(`#component_id_${rowNumber}`).val('').attr('disabled', true);
                $(`#times_${rowNumber}`).removeAttr('disabled');
            } else {
                $(`#component_id_${rowNumber}`).removeAttr('disabled');
                $(`#times_${rowNumber}`).removeAttr('disabled');

                $(`#amount_${rowNumber}`).val('').attr('disabled', true);
            }

            renderSelect2(`#component_id_${rowNumber}`);
        }

        function updateRateOfInterest(rowNumber) {
            let emiRule = $(`#emi_rule_${rowNumber}`).val();

            if (emiRule == 'without_interest') {
                $(`#interest_rate_${rowNumber}`).val('').attr('disabled', true);
                $(`#interest_type_${rowNumber}`).val('').attr('disabled', true);
                $(`#emi_type_${rowNumber}`).val('').attr('disabled', true);
            } else {
                $(`#interest_rate_${rowNumber}`).removeAttr('disabled');
                $(`#interest_type_${rowNumber}`).removeAttr('disabled');
                $(`#emi_type_${rowNumber}`).removeAttr('disabled');
            }
        }

        async function loadReferenceData(callback) {
            await Promise.all([
                fetchDepartments(),
                fetchDesignations(),
                fetchEmployees()
            ]);

            callback();
        }

        async function fetchDepartments() {
            return new Promise((resolve, reject) => {
                apiRequest('{{ $orgUrl }}/get-departments', null, null, 'GET',
                    function(res) {
                        departments = res.data;
                        resolve();
                    },
                    function(xhr) {
                        reject(xhr);
                    }
                );
            })
        }

        async function fetchDesignations() {
            return new Promise((resolve, reject) => {
                apiRequest('{{ $orgUrl }}/get-designations', null, null, 'GET',
                    function(res) {
                        designations = res.data;
                        resolve();
                    },
                    function(xhr) {
                        reject(xhr);
                    }
                );
            });
        }

        async function fetchEmployees() {
            return new Promise((resolve, reject) => {
                apiRequest('{{ $orgUrl }}/get-employees', null, null, 'GET',
                    function(res) {
                        employees = res.data;
                        resolve();
                    },
                    function(xhr) {
                        reject(xhr);
                    }
                );
            });
        }
    </script>
@endpush