@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;
    }

    .row.border {
        border: 1px solid black;
        /* Ensures the border color is black */
    }
</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.update') }}">

                        @csrf
                        @method('PUT')

                        <input type="hidden" name="journal_voucher_id" value="{{ $journalVoucher->journal_voucher_id }}">
                        <input type="hidden" name="journal_voucher_no" value="{{ $journalVoucher->journal_voucher_no }}">

                        <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"
                                    required name="journal_voucher_date"
                                    value="{{ old('journal_voucher_date', $journalVoucher->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', $journalVoucher->journal_voucher_note) }}</textarea>
                                @error('journal_voucher_note')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>
                        </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">
                                    @foreach ($journalVoucher->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>
                                                    <select name="debit_code_id[]"
                                                        class="form-select form-select-solid code-select">
                                                        @foreach ($expenseCodes as $code)
                                                            @include('voucher.partials.optionsEditForm', [
                                                                'code' => $code,
                                                                'item' => $item,
                                                            ])
                                                        @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 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) }}" />
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </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 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"
                                                value="{{ old('debit_amount', $journalVoucher->debit_amount) }}"
                                                readonly />
                                        </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">
                                    @foreach ($journalVoucher->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>
                                                    <select name="credit_code_id[]"
                                                        class="form-select form-select-solid code-select">
                                                        @foreach ($incomeCodes as $code)
                                                            @include('voucher.partials.optionsEditForm', [
                                                                'code' => $code,
                                                                'item' => $item,
                                                            ])
                                                        @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 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) }}" />
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach

                                </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 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"
                                                value="{{ old('credit_amount', $journalVoucher->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>
                            <button type="submit" class="btn btn-success">
                                <span class="indicator-label">জমা</span>
                            </button>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </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() {
            var selectedCodeTitle = $(this).find('option:selected').data('code-title');
            var selectedOption = $(this).find('option:selected').data('display');

            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;
                    },
                });
            } else {
                $(this).select2({
                    templateSelection: function() {
                        return selectedCodeTitle;
                    },
                });
            }


            // Check if user selects a code which is already selected
            let selectedValues = [];
            $('.code-select').each(function() {
                const value = $(this).val();
                if (value && selectedValues.includes(value)) {
                    alert('You cannot select the same code more than once.');
                    $(this).val('').trigger('change');
                }
                if (value) {
                    selectedValues.push(value);
                }
            });
        });

        $(document).ready(function() {
            // Function to update the total amount for debit
            // Date picker to flatpickr
            $("#voucher_date_pick").flatpickr({
                dateFormat: "Y-m-d"
            });
            $("#check_date_pick").flatpickr({
                dateFormat: "Y-m-d"
            });

            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.optionsEditForm', [
                                        'code' => $code,
                                        'item' => $item,
                                    ])
                             @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>
                </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.optionsEditForm', [
                                        'code' => $code,
                                        'item' => $item,
                                    ])
                         @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();
            });
        });
    </script>

@endsection