@extends('layouts.master')

@section('title', __('accounting.expense_invoice'))

@section('content_title', __('accounting.expense_invoice'))

@section('main_content')
    <div class="main-card mb-3 card">
        <div class="card-body">
            <div class="card-title">{{ __('accounting.create_expense_transaction') }}</div>
            <div>
                <form id="expense_transaction_form" action="{{ route('accounting.expense_transactions.store') }}"
                    method="POST">
                    <div class="row">

                        @if (auth()->user()->hasRole('Super Admin'))
                            <div class="col-6 col-md-4 mb-3">
                                <label for="" class="form-label">{{ __('core.business_name') }}</label>
                                <select class="form-select" name="business_id" id="business_id">
                                    @foreach ($business_list as $key => $value)
                                        <option value="{{ $key }}">{{ $value }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @else
                            <input type="hidden" name="business_id" class="">
                        @endif
                        <div class="col-6 col-md-4 mb-3">
                            <label for="payment_account_id" class="form-label">{{ __('accounting.payment_account') }} :
                                *
                            </label>
                            <select name="payment_account_id" class="form-select form-control" id="payment_account_id"
                                required>
                                <option value="">{{ __('core.please_select') }}</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-4 mb-3">
                            <label for="payment_method" class="form-label">{{ __('accounting.payment_method') }} :
                                *
                            </label>
                            <select name="payment_method" class="form-select form-control" id="payment_method" required>
                                {{-- 1-cash, 2-card, 3-cheque, 4-bank_transfer, 5-other --}}
                                <option value="">{{ __('core.please_select') }}</option>
                                <option value="1">{{ __('accounting.cash') }}</option>
                                <option value="2">{{ __('accounting.card') }}</option>
                                <option value="3">{{ __('accounting.cheque') }}</option>
                                <option value="4">{{ __('accounting.bank_transfer') }}</option>
                                <option value="5">{{ __('accounting.other') }}</option>
                            </select>
                        </div>
                        {{-- <div class="col-6 col-md-4 mb-3">
                            <label for="expense_transaction_date"
                                class="form-label">{{ __('accounting.parent_expense_category') }}:</label>
                            <select name="parent_expense_category" id=""
                                class="form-select parent_expense_category_id">
                                <option value="">{{ __('core.please_select') }}</option>
                                @foreach ($expense_category_parent_list as $item)
                                    <option value="{{ $item->id }}">{{ $item['expense_category'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-4 mb-3">
                            <label for="expense_transaction_date"
                                class="form-label">{{ __('accounting.expense_category') }}:</label>
                            <select required name="expense_category_id" id=""
                                class="form-select expense_category_id">
                                <option value="">{{ __('core.please_select') }}</option>
                                @foreach ($expense_category_list as $item)
                                    <option value="{{ $item['id'] }}">{{ $item['expense_category'] }}</option>
                                @endforeach
                            </select>
                        </div> --}}
                        <div class="col-6 col-md-4 mb-3">
                            <label for="expense_transaction_date" class="form-label">{{ __('core.month_year') }}</label>
                            <input type="hidden" name="joining_date">
                            <input type="text" class="form-control" name="transaction_date" id="transaction_date"
                                placeholder="{{ __('accounting.transaction_date') }}" required data-toggle="datepicker"
                                value="{{ date('Y-m-d') }}">

                        </div>
                        <div class="col-6 col-md-4 mb-3">
                            <label for="user_id" class="form-label">{{ __('core.username') }}</label>
                            <select multiple class="form-select user_id multiselect-dropdown" name="user_id[]"
                                id="user_id" aria-placeholder="Please select">

                            </select>
                        </div>




                        <div class="col-12 mb-3">
                            <table id="dataTable" class="table table-hover  table-bordered">
                                <thead>
                                    <tr>
                                        <th>{{ __('accounting.parent_expense_category') }}</th>
                                        <th>{{ __('accounting.expense_category') }}</th>
                                        <th>{{ __('accounting.amount') }}</th>
                                        <th id="removeHeaidng">Remove</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                    <tr>
                                        <td>
                                            <div class="form-group">
                                                <select name="parent_expense_category[]" id=""
                                                    class="form-select parent_expense_category_id">
                                                    <option value="">{{ __('core.please_select') }}</option>
                                                    @foreach ($expense_category_parent_list as $item)
                                                        <option value="{{ $item->id }}">
                                                            {{ $item['expense_category'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <select name="expense_category_id[]" id=""
                                                    class="form-select expense_category_id" required>
                                                    <option value="">{{ __('core.please_select') }}</option>
                                                    @foreach ($expense_category_list as $item)
                                                        <option value="{{ $item->id }}">
                                                            {{ $item['expense_category'] }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="form-group">
                                                <input type="number" required min="0" name="amount[]"
                                                    class="form-control amount" placeholder="amount">
                                            </div>
                                        </td>


                                        <td class="removeColumn">
                                            <span class="btn btn-danger ">Remove</span>
                                        </td>

                                    </tr>
                                    <!-- Dynamic rows will be added here -->
                                </tbody>
                                <tfoot id="tableFooter">
                                    <tr>
                                        <th colspan="2">
                                            Total
                                        </th>
                                        <th>
                                            Total Amount
                                            <input type="text" class="form-control" id="totalAmount" name="total_amount"
                                                readonly>
                                        </th>
                                    </tr>


                                </tfoot>
                            </table>
                            <span id="addRowButton" class="btn btn-primary">Add Row</span>
                        </div>

                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {

            var business_id = "{{ auth()->user()->business_id }}";
            loadPaymentAccount(business_id);
            updateUserSelects(business_id);

            function loadPaymentAccount(businessId) {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('accounting.payment_fee_schedules.load_payment_account') }}",
                    data: {
                        business_id: businessId
                    },
                    success: function(response) {
                        $('#payment_account_id').html(response.data);
                    },
                    error: function(error) {}
                });
            }

            var employee_designation_id = null;
            var employee_designation_list_data = null;
            var bonus_list_data = null;

            $("#business_id").on("change", function() {
                business_id = $(this).val();
                let data1 = {
                    "business_id": business_id,
                    "parent_id": "null"
                };
                let data2 = {
                    "business_id": business_id,
                    "parent_id": "notnull"
                };
                updateExpenseCategory(data1, $(".parent_expense_category_id"));
                updateExpenseCategory(data2, $(".expense_category_id"));
                loadPaymentAccount(business_id);
                // updateDesignation(business_id);
                updateUserSelects(business_id)
            })

            $(document).on("change", ".parent_expense_category_id", function() {
                let parent_expense_category_id = $(this).val();
                let ele = $(this)
                let data = {
                    "business_id": business_id,
                    "parent_id": parent_expense_category_id || "notnull"
                }

                updateExpenseCategory(data, ele.closest("tr").find(".expense_category_id"))
            })

            function updateUserSelects(business_id, employee_designation_id) {
                $.ajax({
                    method: "get",
                    url: "{{ route('users.userData') }}",
                    data: {
                        business_id
                    }, // Append the designation_id
                    success: function(response) {
                        let data = JSON.parse(response);
                        let $select = $(".user_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select')); // Add default option
                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value',
                                    item.id).text(
                                    item.username));
                            })
                        }
                        $select.trigger("change")
                    },
                    error: function(error) {
                        console.error(error);
                        let $select = $(".user_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select'));
                    }
                })
            }

            function updateDataByBusinessId(business_id, user_for, $parent) {
                $.ajax({
                    method: "GET",
                    url: "{{ route('accounting.bonuses.get_data_by_business_id', ['business_id' => ':business_id', 'user_for' => ':user_for']) }}"
                        .replace(':business_id', business_id).replace(":user_for", user_for),
                    success: function(response) {
                        let data = JSON.parse(response);
                        let $select = $parent.find(".bonus_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select')); // Add default option
                        bonus_list_data = data;
                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value',
                                    item.id).text(
                                    item.bonus_name + " - " + item.bonus_amount));
                            })
                        }
                    },
                    error: function(error) {
                        let $select = $parent.find(".bonus_id")
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select'));

                    }
                })
            }

            function updateExpenseCategory(data, $select) {
                $.ajax({
                    method: "get",
                    url: "{{ route('accounting.expense_categories.get_expense_category') }}",
                    data: data,
                    success: function(response) {
                        let data = JSON.parse(response);
                        $select.empty(); // Clear the existing options
                        $select.append($('<option></option>').attr('value', '').text(
                            'Please Select')); // Add default option
                        if (data && data.length > 0) {
                            data.map((item) => {
                                $select.append($('<option></option>').attr('value',
                                    item.id).text(
                                    item.expense_category));
                            })
                        }
                    }
                })
            }




            $(document).on('click', '#addRowButton', function() {
                console.log("clicked")
                addRow($('#tableBody'), 1);
                $("#tableFooter").show();
                calculateTotalAmount();
            });

            $(document).on("change", ".amount", function() {
                calculateTotalAmount();
            })

            $(document).on("focusout", ".amount", function() {
                calculateTotalAmount();
            })

            function addRow(tableBody, rows) {
                for (let i = 0; i < rows; i++) {
                    let newRows = `
                     <tr>
                                            <td>
                                                <div class="form-group">
                                                    <select name="parent_expense_category[]" id=""
                                                        class="form-select parent_expense_category_id">
                                                        <option value="">{{ __('core.please_select') }}</option>
                                                        @foreach ($expense_category_parent_list as $item)
                                                            <option value="{{ $item->id }}">
                                                                {{ $item['expense_category'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <select name="expense_category_id[]" id=""
                                                        class="form-select expense_category_id">
                                                        <option value="">{{ __('core.please_select') }}</option>
                                                        @foreach ($expense_category_list as $item)
                                                            <option value="{{ $item->id }}">
                                                                {{ $item['expense_category'] }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="form-group">
                                                    <input type="number" min="0" name="amount[]" class="form-control amount"
                                                        placeholder="amount">
                                                </div>
                                            </td>


                                            <td class="removeColumn">
                                                <span class="btn btn-danger removeRowButton">Remove</span>
                                            </td>

                                        </tr>`;
                    tableBody.append(newRows);
                    let business_id = $("#business_id").val();
                    let data1 = {
                        "business_id": business_id,
                        "parent_id": "null"
                    };
                    let data2 = {
                        "business_id": business_id,
                        "parent_id": "notnull"
                    };
                    updateExpenseCategory(data1, $(newRows).find(".parent_expense_category_id"));
                    updateExpenseCategory(data2, $(newRows).find(".expense_category_id"));
                }
            }

            $('#tableBody').on('click', '.removeRowButton', function() {
                $(this).closest('tr').remove();
                calculateTotalAmount();
            });

            //cvalculate total amount function
            function calculateTotalAmount() {
                var total_amount = 0;
                $('.amount').each(function() {
                    let amount_value = parseFloat($(this).val());
                    if (!isNaN(amount_value)) {
                        total_amount += amount_value; // Add the valid number to the total
                    }
                })

                $('#totalAmount').val(total_amount.toFixed(2));

            }

            //calculate total discount function
            function calculateTotalDiscount() {
                var total_discount = 0;
                $('.discount').each(function() {
                    let discount_value = parseFloat($(this).val());
                    if (!isNaN(discount_value)) {
                        total_discount += discount_value; // Add the valid number to the total
                    }
                })

                $('#totalDiscount').val(total_discount.toFixed(2));
            }

            //calculate total recieve function
            function calculateTotalRecieve() {
                var total_recieve = 0;
                $('.recieve').each(function() {
                    let recieve_value = parseFloat($(this).val());
                    if (!isNaN(recieve_value)) {
                        total_recieve += recieve_value; // Add the valid number to the total
                    }
                })

                $('#totalRecieve').val(total_recieve.toFixed(2));
            }




        })

        $(document).ready(function() {


            $(document).on('submit', 'form#expense_transaction_form', function(e) {
                e.preventDefault();
                $(this).find('button[type="submit"]').attr('disabled', false);
                var data = $(this).serialize();

                $.ajax({
                    method: $(this).attr('method'),
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    success: function(result) {
                        $("#expense_transaction_form").find('.text-danger').remove();
                        if (result.success == true) {
                            $("#expense_transaction_form").parent().closest('.modal').modal(
                                "hide");
                            toastr.success(result.msg);
                            window.location.href =
                                "{{ route('accounting.expense_transactions.index') }}";
                        } else {
                            toastr.error(result.msg);
                            if (result.details) {
                                if (result.details.expense_transaction_name) {
                                    document.getElementById("expense_transaction_name_msg")
                                        .innerText = result
                                        .details.expense_transaction_name[0];
                                } else {
                                    document.getElementById("expense_transaction_name_msg")
                                        .innerText = '';
                                }
                            }
                        }
                    },
                    error: function(response) {
                        // Clear previous error messages
                        $("#expense_transaction_form").find('.text-danger').remove();

                        if (response.status === 422) {
                            // Validation errors
                            var errors = response.responseJSON.errors;
                            for (var field in errors) {
                                // Find the input field and add the error message
                                let key = field;
                                let parts = key.split('.');
                                let input_name = parts[0]; // "input field name value"
                                let index = parts[1];
                                if (index) {
                                    var $input = $('[name="' + input_name + '[]"]')[index];
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input.parentElement.appendChild(span);
                                } else {
                                    var $input = $('[name="' + field + '"]');
                                    let span = document.createElement("span");
                                    span.classList.add("text-danger");
                                    span.innerText = errors[field][0];
                                    $input[0].parentElement.appendChild(span);
                                }
                                toastr.error(errors[field][0]);

                            }
                        } else {
                            toastr.error('An unexpected error occurred.');
                        }

                        // Re-enable submit button
                    }
                });
            });
        });
    </script>
@endpush