@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">
                        #{{ $v_num }}
                    </span>
                </div>
            </div>
            <!--end::Header-->

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

                <!--begin::Form-->
                <form >
                    <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', $journalvoucherInfo->journal_voucher_date) }}" readonly />
                            @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" readonly>{{ old('journal_voucher_note', $journalvoucherInfo->journal_voucher_note) }}</textarea>
                            @error('journal_voucher_note')
                            <span class="text-danger mt-2">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


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

                    <div id="input-container-debit">
                        @foreach ($journalvoucherInfo->journalVoucherItems as $item)
                        @if ($item->item_debit_amount)
                        <div class="row mb-3">
                            <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"
                                value="{{ $item->code->code_no }}" readonly />
                               
                            </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 value="{{ $item->code->code_title }}" />
                            </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[]" value="{{ old('item_debit_amount[]', $item->item_debit_amount) }}"readonly />
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    <div class="row">
                        <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" value="{{ old('debit_amount', $journalvoucherInfo->debit_amount) }}" readonly />
                            </div>
                        </div>
                    </div>
                 </div>
                 {{-- Credit Section --}}
                 <div class="col-md-6 border">
                    <div class="mt-10 mb-10 border-bottom border-2">
                        <label class="fs-5 fw-bold mb-3">ক্রেডিট</label>
                    </div>

                    <div id="input-container-cradit">
                        @foreach ($journalvoucherInfo->journalVoucherItems as $item)
                        @if ($item->item_credit_amount)
                        <div class="row mb-3">
                        <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"
                                value="{{ $item->code->code_no }}" readonly />
                               
                            </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 value="{{ $item->code->code_title }}" />
                            </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_credit_amount[]" value="{{ old('item_credit_amount[]', $item->item_credit_amount) }}" readonly/>
                            </div>
                        </div>
                        @endif
                        @endforeach

                    </div>
                
                    <div class="row">
                        <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" value="{{ old('credit_amount', $journalvoucherInfo->credit_amount) }}" readonly />
                            </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>
            
                    </div>
                </form>



              <!--end::Form-->
            </div>
        </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).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');

                // Update the next input field with class 'code-input'
                var codeInput = $(this).closest('.fv-row').next('.fv-row').find('.code-input');
                if (codeInput.length) {
                    codeInput.val(selectedCodeTitle || '');
                }

                // Properly update Select2 rendered display
                if (selectedOption) {
                    $(this).select2({
                        templateSelection: function() {
                            return selectedOption; // Set display text
                        },
                    });
                } else {
                    $(this).select2({
                        templateSelection: function() {
                            return selectedCodeTitle; // Set display text
                        },
                    });
                }

                // 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);
                    }
                });

            });


    $(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 ($codes 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 ($codes 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