@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">{{ isset($invoice_type) && $invoice_type === 'ADVANCED' ? 'অগ্রিম ' : '' }}{{ $type === 'INCOME' ? 'আয়ের ভাউচার তৈরী' : 'খরচের ভাউচার তৈরী' }}</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 class="form" method="POST"
                        action={{ $type === 'INCOME' ? '/voucher/income/store' : '/voucher/expense/store' }}
                        enctype="multipart/form-data">

                        @csrf

                        <input type="text" hidden name="voucher_type" value="{{ $type }}">
                        <input type="text" hidden name="voucher_no" id="voucher_no" value="{{ $v_num }}">
                        <input type="text" hidden name="advanced_voucher_id" id="advanced_voucher_id"
                            value="{{ request()->query('advanced_voucher_id') ? request()->query('advanced_voucher_id') : '' }}">
                        <input type="text" hidden name="voucher_invoice_type"
                            value="{{ isset($invoice_type) ? $invoice_type : 'CURRENT' }}">

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

                        {{-- Fiscal Year --}}
                        <div class="row mb-5">
                            <div class="col-md-6 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' selected>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 class="col-md-6 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="{{ old('voucher_date') }}" />
                                @error('voucher_date')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row mb-5">
                                <label class="required fs-5 fw-bold mb-2">ভেন্ডর / গ্রহণকারীর ধরন </label>
                                <select name="vendor_type" id="kt_vendor_type"
                                    class="form-select form-select-solid @error('vendor_type') is-invalid @enderror"
                                    data-control="select2" data-placeholder="Select">
                                    <option value=""></option>
                                    @foreach ($vendorTypes as $item)
                                        <option value="{{ $item }}">{{ $item }}</option>
                                    @endforeach
                                </select>
                                @error('vendor_type')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 employeePortion mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-1">Employee Name</label>
                                <select name="employee_id" id="employeeId" aria-label="Select Employee"
                                    data-control="select2" data-placeholder="Select Employee"
                                    class="form-select form-select-solid vendor-select">
                                    <option value=""></option>
                                    @foreach ($allEmployees as $key => $value)
                                        <option value="{{ $key }}" data-vendor-title="{{ $value }}">
                                            {{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 studentPortion mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-1">Student Name</label>
                                <select name="student_id" aria-label="Select Student" data-control="select2"
                                    data-placeholder="Select Student" class="form-select form-select-solid vendor-select">
                                    <option value=""></option>
                                    @foreach ($allStudents as $item)
                                        <option value="{{ $item->student_id }}"
                                            data-vendor-title="{{ $item->student_name }}">
                                            {{ $item->student_name }}(SID:{{ $item->student_no }}{{ isset($item->department->department_name) ? ', Dept:' . $item->department->department_name : '' }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('student_id')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 studentPortion mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-1">Year</label>
                                <select name="semester_year" aria-label="Select Year" data-control="select2"
                                    data-placeholder="Select Year" class="form-select form-select-solid">
                                    <option value=""></option>
                                    <option value="FIRST">FIRST YEAR</option>
                                    <option value="SECOND">SECOND YEAR</option>
                                    <option value="THIRD">THIRD YEAR</option>
                                    <option value="FOURTH">FOURTH YEAR</option>
                                </select>
                                @error('semester_year')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-6 studentPortion mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-1">Semester</label>
                                <select name="semester" aria-label="Select year" data-control="select2"
                                    data-placeholder="Select Year" class="form-select form-select-solid">
                                    <option value=""></option>
                                    <option value="FIRST">FIRST SEMESTER</option>
                                    <option value="SECOND">SECOND SEMESTER</option>
                                </select>
                                @error('semester')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

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

                        <div class="row mb-5">
                            <div class="col-md-12 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="{{ old('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">
                            <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.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="code_amount[]" />
                                    <span class="text-danger mt-2"></span>
                                </div>
                            </div>
                        </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-8 fv-row">
                                <label class="required fs-5 fw-bold mb-1">নোট :</label>
                                <textarea class="form-control form-control-solid" id="note" name="voucher_note" rows="4"></textarea>
                                @error('voucher_note')
                                    <span class="text-danger mt-2">{{ $message }}</span>
                                @enderror
                            </div>

                            {{-- <div class="col-md-4 fv-row">
                                <label class="fs-5 fw-bold mb-1">ফাইল আপলোড :</label>
                                <input type="file" class="form-control form-control-solid" name="voucher_doc_name" />
                                <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 code-select">
                                    <option value=""></option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->bank_account_id }}">
                                            {{ $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="{{ $type === 'EXPENSE' ? 'required' : ' ' }} fs-5 fw-bold mb-1">{{ $type === 'EXPENSE' ? 'চেক নং :' : 'রশিদ নং :' }}</label>
                                    <input type="text"
                                        class="form-control form-control-solid @error('check_no') is-invalid @enderror"
                                        name="check_no" value="{{ old('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="{{ $type === 'EXPENSE' ? 'required' : ' ' }} fs-5 fw-bold mb-1">{{ $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="{{ old('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() {
            if ($("#kt_vendor_type").val() == '') {
                $(".employeePortion").hide();
                $(".studentPortion").hide();
                $(".othersPortion").show();
            }

            // HIDE OR SHOW MARITAL PORTION BY CHANGING MARITAL STATUS
            $("#kt_vendor_type").on("change", function() {
                const vendorType = $(this).val();
                changeVendorType(vendorType);
            });

            function changeVendorType(vendorType) {

                if (vendorType == 'Employee') {
                    $(".employeePortion").show();
                    $(".studentPortion").hide();
                    $(".othersPortion").hide();
                    $('#name-input').val(null);
                    $('.vendor-select').val(null);
                }
                if (vendorType == 'Student') {
                    $(".studentPortion").show();
                    $(".employeePortion").hide();
                    $(".othersPortion").hide();
                    $('#name-input').val(null);
                    $('.vendor-select').val(null);
                }
                if (vendorType == 'Others') {
                    $(".othersPortion").show();
                    $(".employeePortion").hide();
                    $(".studentPortion").hide();
                    $('#name-input').val(null);
                    $('.vendor-select').val(null);
                }

            }

            // Update the hidden input field based on the selected vendor type
            $("#employeeId").on("change", function() {
                const selectedValue = $(this).val();

                $("#selected_key").val(selectedValue); // Set the hidden input value
                changeVendorType(selectedValue); // Call the existing 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', '.vendor-select', function() {
                // Get the selected option's data attribute 'data-code-title'
                var selectedVendorTitle = $(this).find('option:selected').data('vendor-title');
                console.log("selectedVendorTitle", selectedVendorTitle)
                $('#name-input').val(selectedVendorTitle);
            });


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

        // by default hidden spouse name/spouse date of birth/spouse occupation


        // 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