@extends('master')

@section('title', 'নতুন জার্নাল যোগ')
@section('breadcrumbMainTitle', 'নতুন জার্নাল')

<style>
    .select2-results__group {
        font-weight: bold !important;
        color: #666 !important;
        font-size: 13px !important;
    }

    .select2-results__option .select2-results__option--selectable {
        padding-left: 30px !important;
    }
</style>

@section('content')
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <!--begin::Card-->
            <div class="card">
                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bolder fs-3 mb-1">জার্নাল ভাউচার তৈরী</span>
                    </h3>
                    <div class="card-toolbar">
                        <span class="badge bg-secondary py-3 fs-6 text-black" id="v_num_badge">
                            #{{ $voucherNumber }}
                        </span>
                    </div>
                </div>
                <!--end::Header-->

                <!--begin::Card body-->
                <div class="card-body py-3 mt-5">
                    @include('message')

                    <!--begin::Form-->
                    <form class="form" method="POST" action="{{ route('voucher.journal.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        <input type="text" hidden name="journal_voucher_no" id="journal_voucher_no"
                            value="{{ $voucherNumber }}">
                        <input type="text" hidden name="advanced_voucher_id" id="advanced_voucher_id"
                            value="{{ request()->query('advanced_voucher_id') ? request()->query('advanced_voucher_id') : '' }}">


                        @error('voucher_no')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        {{-- Fiscal Year --}}
                        <div class="row mb-5">
                            <div class="col-md-4 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-1">তারিখ :</label>
                                <input type="text" id="voucher_date_pick" autocomplete="off"
                                    class="form-control form-control-solid @error('journal_voucher_date') is-invalid @enderror"
                                    name="journal_voucher_date" value="{{ old('journal_voucher_date') }}" />
                                @error('journal_voucher_date')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-8 fv-row">
                                <label class="fs-5 fw-bold mb-1">নোট :</label>
                                <textarea class="form-control form-control-solid" id="journal_voucher_note" name="journal_voucher_note" rows="4">{{ old('journal_voucher_note') }}</textarea>
                                @error('journal_voucher_note')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        {{-- Divider --}}
                        <div class="mt-10 mb-10 border-bottom border-gray-500">
                            <label class="fs-5 fw-bold mb-3">হিসেবের খাত :</label>
                        </div>

                        <div class="row">
                            {{-- Debit Section --}}
                            <div class="col-md-6  border-start border-top border-bottom border-gray-500">
                                <div class="mt-10 mb-10 border-bottom border-gray-500">
                                    <label class="fs-5 fw-bold mb-3">ডেবিট</label>
                                </div>

                                <div id="input-container-debit">
                                    <!-- Initial set of input fields for debit -->
                                    <div class="row mb-3">

                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">অর্থনৈতিক কোড নং :</label>
                                            <select name="debit_code_id[]" aria-label="Select a code" data-control="select2"
                                                data-placeholder="Select a code"
                                                class="form-select form-select-solid code-select">
                                                <option value=""></option>
                                                @foreach ($expenseCodes as $code)
                                                    @include('voucher.partials.options', ['code' => $code])
                                                @endforeach
                                            </select>
                                            <span class=" text-danger mt-2"></span>
                                        </div>

                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">শিরোনাম :</label>
                                            <input type="search" class="form-control form-control-solid code-input"
                                                readonly />
                                            <span class="text-danger mt-2"></span>
                                        </div>

                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">পরিমাণ:</label>
                                            <input type="number" class="form-control form-control-solid"
                                                name="item_debit_amount[]" />
                                            <span class="text-danger mt-2"></span>
                                        </div>

                                    </div>
                                    {{-- Code and Amount Error --}}
                                    @error('debit_code_id.*')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                    @error('item_debit_amount.*')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror

                                </div>

                                <div align="right" class="mb-10">
                                    <button type="button" id="add-more-debit" class="btn btn-sm btn-primary">আরো যোগ
                                        করুন</button>
                                </div>

                                <div class="row border-top border-gray-500">
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6">
                                        <div class="fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">মোট:</label>
                                            <input type="number" class="form-control form-control-solid total-amount"
                                                name="debit_amount" readonly />
                                            <span class="text-danger mt-2"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Credit Section --}}
                            <div class="col-md-6  border border-gray-500">
                                <div class="mt-10 mb-10 border-bottom border-gray-500">
                                    <label class="fs-5 fw-bold mb-3">ক্রেডিট</label>
                                </div>

                                <div id="input-container-cradit">
                                    <!-- Initial set of input fields for credit -->
                                    <div class="row mb-3">
                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">অর্থনৈতিক কোড নং :</label>
                                            <select name="credit_code_id[]" aria-label="Select a code"
                                                data-control="select2" data-placeholder="Select a code"
                                                class="form-select form-select-solid code-select">
                                                <option value=""></option>
                                                @foreach ($incomeCodes as $code)
                                                    @include('voucher.partials.options', ['code' => $code])
                                                @endforeach
                                            </select>
                                            <span class="text-danger mt-2"></span>
                                        </div>

                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">শিরোনাম :</label>
                                            <input type="search" class="form-control form-control-solid code-input"
                                                readonly />
                                            <span class="text-danger mt-2"></span>
                                        </div>

                                        <div class="col-md-4 fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">পরিমাণ:</label>
                                            <input type="number" class="form-control form-control-solid code-amount"
                                                name="item_credit_amount[]" />
                                            <span class="text-danger mt-2"></span>
                                        </div>
                                    </div>
                                    {{-- Code and Amount Error --}}
                                    @error('credit_code_id.*')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                    @error('item_credit_amount.*')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div align="right" class="mb-10">
                                    <button type="button" id="add-more-cradit" class="btn btn-sm btn-primary">আরো যোগ
                                        করুন</button>
                                </div>
                                <div class="row border-top border-gray-500">
                                    <div class="col-md-6"></div>
                                    <div class="col-md-6">
                                        <div class="fv-row mb-3">
                                            <label class="required fs-5 fw-bold mb-1">মোট:</label>
                                            <input type="number" class="form-control form-control-solid total-amount"
                                                name="credit_amount" readonly />
                                            <span class="text-danger mt-2"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-3">
                            <a href="{{ url()->previous() }}" class="btn btn-secondary">
                                <span class="indicator-label">Back</span>
                            </a>
                            <button type="submit" class="btn btn-success">
                                <span class="indicator-label">জমা</span>
                            </button>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        // Set code title to the field on load
        $(document).ready(function() {

            // Date picker to flatpickr
            $("#voucher_date_pick").flatpickr({
                dateFormat: "Y-m-d"
            });
            $("#check_date_pick").flatpickr({
                dateFormat: "Y-m-d"
            });

            // Use event delegation to handle changes on dynamically added elements
            $(document).on('change', '.code-select', function() {
                // Get the selected option's data attribute 'data-code-title'
                var selectedCodeTitle = $(this).find('option:selected').data('code-title');
                var selectedOption = $(this).find('option:selected').data('display');

                // Set the value of the next input element with class 'code-input'
                $(this).closest('.fv-row').next('.fv-row').find('.code-input').val(selectedCodeTitle || '');
                // Change the display text in the select box to show only the code_no
                $(this).next('.select2-container').find('.select2-selection__rendered').text(
                    selectedOption || selectedCodeTitle);


                // Check if user selects a code which is already selected
                let selectedValues = [];
                $('.code-select').each(function() {
                    const value = $(this).val();

                    // Check for duplicates
                    if (value && selectedValues.includes(value)) {
                        alert('You cannot select the same code more than once.');

                        // Clear the duplicate select element
                        $(this).val('').trigger(
                            'change'); // Reset the select and trigger change event
                    }

                    // Add value to selectedValues array if it's not empty
                    if (value) {
                        selectedValues.push(value);
                    }
                });

            });

            $("#voucher_date_pick").on("change", function() {
                let selectedValue = $(this).val(); // Get the selected value
                let selectedYearMonth = selectedValue.slice(0, 4) + selectedValue.slice(5, 7);

                let updatedVoucherNumber = getUpdatedVoucherNumber(selectedYearMonth);
            });

            async function getUpdatedVoucherNumber(yearMonth) {
                // AJAX call to update the voucher number
                try {
                    const response = await $.ajax({
                        type: "GET",
                        url: `/voucher/voucher-no/${yearMonth}`,
                        dataType: "json",
                    });

                    if (response) {

                        $("#v_num_badge").text(`#${response}`);
                        $("#voucher_no").val(response);

                    } else {
                        toastr.error(response?.message || "An unexpected error occurred.");
                    }
                } catch (jqXHR) {
                    console.error("AJAX Request Failed:", jqXHR);
                    if (jqXHR.status === 422) {
                        displayValidationErrors(jqXHR.responseJSON?.errors);
                    } else {
                        toastr.error(
                            jqXHR.responseJSON?.message || "An unexpected error occurred."
                        );
                    }
                }
            }
        });

        $(document).ready(function() {


            // Function to update the total amount for debit
            function updateTotalAmountDebit() {
                let totalDebit = 0;
                $('input[name="item_debit_amount[]"]').each(function() {
                    totalDebit += parseFloat($(this).val()) || 0;
                });
                $('input[name="debit_amount"]').val(totalDebit);
            }

            // Function to update the total amount for credit
            function updateTotalAmountCradit() {
                let totalCradit = 0;
                $('input[name="item_credit_amount[]"]').each(function() {
                    totalCradit += parseFloat($(this).val()) || 0;
                });
                $('input[name="credit_amount"]').val(totalCradit);
            }

            // Add new field for debit
            $('#add-more-debit').click(function() {
                const newRow = `
                <div class="row mb-3">
                    <div class="col-md-4 fv-row mb-3">
                        <label class="required fs-5 fw-bold mb-1">অর্থনৈতিক কোড নং :</label>
                        <select name="debit_code_id[]" class="form-select form-select-solid code-select">
                            <option value=""></option>
                            @foreach ($expenseCodes as $code)
                                @include('voucher.partials.options', ['code' => $code])
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 fv-row mb-3">
                        <label class="required fs-5 fw-bold mb-1">শিরোনাম :</label>
                        <input type="search" class="form-control form-control-solid code-input" readonly />
                    </div>
                    <div class="col-md-4 fv-row mb-3 d-flex align-items-center justify-content-between gap-2">
                    <div class="flex-fill">
                        <label class="required fs-5 fw-bold mb-1">পরিমাণ:</label>
                        <input type="number" class="form-control form-control-solid code-amount" name="item_debit_amount[]" />
                    </div>

                    <button type="button" class="btn btn-danger mt-8 btn-icon remove-row">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            `;
                $('#input-container-debit').append(newRow);
                $('#input-container-debit').find('select[data-control="select2"]').last().select2();
            });

            // Add new field for credit
            $('#add-more-cradit').click(function() {
                const newRow = `
                <div class="row mb-3">
                    <div class="col-md-4 fv-row mb-3">
                        <label class="required fs-5 fw-bold mb-1">অর্থনৈতিক কোড নং :</label>
                        <select name="credit_code_id[]" class="form-select form-select-solid code-select">
                            <option value=""></option>
                            @foreach ($incomeCodes as $code)
                                @include('voucher.partials.options', ['code' => $code])
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 fv-row mb-3">
                        <label class="required fs-5 fw-bold mb-1">শিরোনাম :</label>
                        <input type="search" class="form-control form-control-solid code-input" readonly />
                    </div>
                    <div class="col-md-4 fv-row mb-3 d-flex align-items-center justify-content-between gap-2">
                    <div class="flex-fill">
                        <label class="required fs-5 fw-bold mb-1">পরিমাণ:</label>
                        <input type="number" class="form-control form-control-solid code-amount" name="item_credit_amount[]" />
                    </div>

                    <button type="button" class="btn btn-danger mt-8 btn-icon remove-row">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                </div>
            `;
                $('#input-container-cradit').append(newRow);
                $('#input-container-cradit').find('select[data-control="select2"]').last().select2();
            });

            // Remove row when the delete button is clicked
            $(document).on('click', '.remove-row', function() {
                $(this).closest('.row').remove();
                updateTotalAmountDebit();
                updateTotalAmountCradit();
            });

            // Update totals when input changes
            $(document).on('input', 'input[name="item_debit_amount[]"]', function() {
                updateTotalAmountDebit();
            });

            $(document).on('input', 'input[name="item_credit_amount[]"]', function() {
                updateTotalAmountCradit();
            });

            $('#input-container-cradit').on('click', '.remove-row', function() {
                $(this).closest('.row').remove(); // Remove the closest row
                updateTotalAmountcradit(); // Update the total when a row is removed
            });

            // Delegate event to handle the removal of rows
            $('#input-container-debit').on('click', '.remove-row', function() {
                $(this).closest('.row').remove(); // Remove the closest row
            });

        });
    </script>
@endsection