@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">{{ $voucherInfo->voucher_type === 'INCOME' ? 'আয়ের ভাউচার আপডেট' : 'খরচের ভাউচার আপডেট' }}</span>
                    </h3>
                    <div class="card-toolbar">
                        <span class="badge bg-secondary py-3 fs-6 text-black">
                            #{{ $voucherInfo->voucher_no }}
                        </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={{ $voucherInfo->voucher_type === 'INCOME' ? '/voucher/income/update' : '/voucher/expense/update' }}
                        enctype="multipart/form-data">

                        @csrf
                        @method('PUT')

                        <input type="text" hidden name="voucher_type" value="{{ $voucherInfo->voucher_type }}">
                        <input type="text" hidden name="voucher_id" value="{{ $voucherInfo->voucher_id }}">
                        <input type="text" hidden name="voucher_no" value="{{ $voucherInfo->voucher_no }}">
                        <input type="text" hidden name="voucher_invoice_type"
                            value="{{ $voucherInfo->voucher_invoice_type }}">
                        @error('voucher_no')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        {{-- Fiscal Year --}}
                        <div class="row mb-10">
                            <div class="col-md-4 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2"> অর্থবছর :</label>
                                <select name="fiscal_year" class="form-select form-select-solid fw-bold"
                                    id="fiscal_year_select" data-control="select2" data-placeholder="Select Year">

                                    <option value='2020-2021' >2020-2021</option><option value='2021-2022' >2021-2022</option><option value='2022-2023' >2022-2023</option><option value='2023-2024' >2023-2024</option><option value='2024-2025' >2024-2025</option><option value='2025-2026' >2025-2026</option><option value='2026-2027' >2026-2027</option><option value='2027-2028' >2027-2028</option><option value='2028-2029' >2028-2029</option><option value='2029-2030' >2029-2030</option><option value='2030-2031' >2030-2031</option>
                                </select>

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

                        <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('voucher_date') is-invalid @enderror"
                                    name="voucher_date" value="{{ $voucherInfo->voucher_date }}" />
                                @error('voucher_date')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-1">নাম (ভেন্ডর / গ্রহণকারী) :</label>
                                <input type="text"
                                    class="form-control form-control-solid @error('name') is-invalid @enderror"
                                    name="name" value="{{ $voucherInfo->name }}" />
                                @error('name')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-1">হিসেবের শিরোনাম :</label>
                                <input type="text"
                                    class="form-control form-control-solid @error('voucher_title') is-invalid @enderror"
                                    name="voucher_title" value="{{ $voucherInfo->voucher_title }}" />
                                @error('voucher_title')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        {{-- Divider --}}
                        <div class="mt-10 mb-10 border-bottom border-2">
                            <label class="fs-5 fw-bold mb-3">আয়ের বিবরণ :</label>
                        </div>

                        {{-- Input Container --}}
                        <div id="input-container">
                            @foreach ($voucherInfo->voucherItems as $item)
                                <div class="row mb-3">
                                    <!-- Initial set of input fields -->
                                    <div class="col-md-4 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">অর্থনৈতিক কোড নং :</label>
                                        <select name="code_title[]" 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 ($codes as $code)
                                                @include('voucher.partials.optionsEditForm', [
                                                    'code' => $code,
                                                    'item' => $item,
                                                ])
                                            @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="code_amount[]"
                                            value="{{ $item->voucher_item_amount }}" />
                                        <span class="text-danger mt-2"></span>
                                    </div>
                                </div>
                            @endforeach
                        </div>


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

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

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

                            <div class="col-md-6 fv-row">
                                <label class="fs-5 fw-bold mb-1">ফাইল আপলোড :</label>

                                @if ($voucherInfo->voucher_doc_name)
                                    <div class="d-flex gap-3 align-items-center form-control form-control-solid">
                                        <i class="fas fa-file fa-2x"></i> <span
                                            class="fw-bold">{{ $voucherInfo->voucher_doc_name }}</span>
                                        <button type="button"
                                            class="btn btn-dark btn-sm ms-auto change_file_button">Change</button>
                                    </div>
                                @else
                                    <input type="file" class="form-control form-control-solid"
                                        name="voucher_doc_name" />
                                @endif

                                <input type="file" class="form-control form-control-solid change_file mt-1 d-none" />

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


                        {{-- Divider --}}
                        <div class="mt-15 mb-10 border-bottom border-2">
                            <label class="fs-5 fw-bold mb-3">ব্যাংক এর বিবরণ :</label>
                        </div>

                        <div class="row mb-3 mt-8">
                            <div class="col-md-6 mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-1">ব্যাংক নাম :</label>
                                <select name="bank_account_id" aria-label="Select bank" data-control="select2"
                                    data-placeholder="Select bank" class="form-select form-select-solid">
                                    <option value=""></option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->bank_account_id }}"
                                            {{ $account->bank_account_id === $voucherInfo->bank_account_id ? 'selected' : '' }}>
                                            {{ $account->bank->bank_name }} ({{ $account->branch->branch_name }}) A/C -
                                            {{ $account->account_no }} ({{ $account->account_name }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('bank_account_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div id="input-container">
                            <div class="row mb-3">
                                <div class="col-md-6 fv-row mb-5">
                                    <label
                                        class="required fs-5 fw-bold mb-1">{{ $voucherInfo->voucher_type === 'EXPENSE' ? 'চেক নং :' : 'রশিদ নং :' }}</label>
                                    <input type="text"
                                        class="form-control form-control-solid @error('check_no') is-invalid @enderror"
                                        name="check_no" value="{{ $voucherInfo->check_no }}" />
                                    @error('check_no')
                                        <span class="text-danger mt-2">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-md-4 fv-row mb-5">
                                    <label
                                        class="required fs-5 fw-bold mb-1">{{ $voucherInfo->voucher_type === 'EXPENSE' ? 'চেক এর তারিখ :' : 'রশিদ এর তারিখ :' }}</label>
                                    <input type="text" id="check_date_pick" autocomplete="off"
                                        class="form-control form-control-solid @error('check_date') is-invalid @enderror"
                                        name="check_date" value="{{ $voucherInfo->check_date }}" />
                                    @error('check_date')
                                        <span class="text-danger mt-2">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>


                        <div class="text-end">
                            <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>

                        <!--end::Modal footer-->
                    </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');

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

            });

            // $('.code-select').select2();

            $('.code-select').each(function() {
                $(this).trigger('change');
            });

            // show change file input field
            $(".change_file_button").on("click", function() {
                // Show the hidden input field with class 'change_file'
                $(this)
                    .closest(".col-md-6")
                    .find(".change_file")
                    .removeClass("d-none")
                    .attr("name", "voucher_doc_name");

                // Hide the current file info container
                $(this).closest(".form-control.form-control-solid").addClass("d-none");
            });
        });

        // Add new field set on button click
        $(document).ready(function() {
            $('#add-more').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="code_title[]" 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 ($codes 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  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" name="code_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').append(newRow); // Append the new row to the input container

                // Re-initialize select2 for newly added select elements
                $('#input-container').find('select[data-control="select2"]').last().select2();
            });

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