@extends('master')

@section('title', 'অগ্রিম সমন্বয়')
@section('breadcrumbMainTitle', 'অগ্রিম সমন্বয়')


@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="text-center pt-5">
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bolder fs-3 mb-1">অগ্রিম সমন্বয়ের ফরম</span>
                    </h3>
                </div>
                <!--end::Header-->
                @include('message');

                <!--begin::Card body-->
                <div class="card-body py-3 mt-5">

                    <div>
                        <h4 class="text-center">অগ্রিম</h4>

                        <p><b>অগ্রিম গ্রহণকারীর নাম ও পদবী: </b>{{ $advancedVoucherInfo?->name }}</p>
                        <p><b>অগ্রিমের বিবরণ: </b>{{ $advancedVoucherInfo?->voucher_note }}</p>
                        <p><b>অগ্রিম গ্রহণের তারিখ: </b>{{ $advancedVoucherInfo?->voucher_date }}</p>
                        <p><b>ভাউচার নম্বর: </b>{{ $advancedVoucherInfo?->voucher_no }}</p>
                        <p><b>টাকা: </b>{{ $advancedVoucherInfo?->voucher_amount }}</p>
                        <p><b>অগ্রিম গ্রহণের উদ্দেশ্য: </b>{{ $advancedVoucherInfo?->voucher_note }}</p>
                    </div>
                    <!--begin::Form-->
                    <form method="POST" action={{ route('voucher.adjustment.store') }}>
                        @csrf

                        <input type="text" name="voucher_id" hidden value="{{ $advancedVoucherInfo?->voucher_id }}" />

                        <h4 class="text-center mt-4 mb-3">অগ্রিম ব্যবহার</h4>
                        <p class="mb-4">
                            উপরোক্ত অগ্রিম যে উদ্দেশ্যে গ্রহণ করা হয়েছিল সে উদ্দেশ্যেই যথাযথভাবে ব্যবহার করা হয়েছে এবং
                            বাজারদর যাচাই করার পর
                            সর্বনিম্ন বাজারদরের ভিত্তিতে মালামাল / মনোহরী দ্রব্যের মূল্য পরিশোধ করা হয়েছে।
                        </p>

                        <div class="row g-3 align-items-center mb-4">
                            <div class="col-md-4">
                                <label class="form-label required">প্রকৃত ব্যয়ের পরিমাণ দাঁড়িয়েছে</label>
                                <input name="expense_amount" type="text" class="form-control"
                                    value="{{ $adjustmentFormInfo?->expense_amount ?? $advancedVoucherInfo?->voucher_amount }}">
                                @error('expense_amount')
                                    <span class="text-danger mt-1">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label for="type" class="form-label required">বাছাই করুন</label>
                                <select name="type" id="type" class="form-select form-select-solid">
                                    <option value="EQUAL"
                                        {{ old('type', $adjustmentFormInfo?->type) == 'EQUAL' ? 'selected' : '' }}>সম
                                        পরিমাণ
                                    </option>
                                    <option value="REFUND"
                                        {{ old('type', $adjustmentFormInfo?->type) == 'REFUND' ? 'selected' : '' }}>অব্যয়িত
                                        পরিমাণ
                                    </option>
                                    <option value="EXTRA"
                                        {{ old('type', $adjustmentFormInfo?->type) == 'EXTRA' ? 'selected' : '' }}>অধিক
                                        পরিমাণ
                                    </option>
                                </select>

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

                        <!-- Refund Section -->
                        <div class="row g-3 align-items-center mt-4 d-none" id="refund_section">
                            <div class="col-md-4">
                                <label class="form-label required">অব্যয়িত পরিমাণ</label>
                                <input type="text" class="form-control" name="refunded_amount"
                                    value="{{ old('refunded_amount', $adjustmentFormInfo?->refunded_amount) }}">
                                @error('refunded_amount')
                                    <span class="text-danger mt-1">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label required">রশিদ</label>
                                <input type="text" class="form-control" name="deposit_no"
                                    value="{{ old('deposit_no', $adjustmentFormInfo?->deposit_no) }}">
                                @error('deposit_no')
                                    <span class="text-danger mt-1">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label required">তারিখ</label>
                                <input type="text" id="voucher_date_pick" autocomplete="off" class="form-control"
                                    name="deposit_date"
                                    value="{{ old('deposit_date', $adjustmentFormInfo?->deposit_date) }}" />
                                @error('deposit_date')
                                    <span class="text-danger mt-1">{{ $message }}</span>
                                @enderror
                            </div>

                            <p class="mt-3">উদ্ধৃত থাকাতে তা ফেরত প্রদান করা হল।</p>
                        </div>

                        <!-- Extra Section -->
                        <div class="row g-3 align-items-center mt-4 d-none" id="extra_section">
                            <div class="col-md-4">
                                <label class="form-label required">অধিক পরিমাণ</label>
                                <input type="text" class="form-control" name="extra_amount"
                                    value="{{ old('extra_amount', $adjustmentFormInfo?->extra_amount) }}" />
                                @error('extra_amount')
                                    <span class="text-danger mt-1">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4 align-self-center">
                                <p class="mt-10">পরিশোধ করা যেতে পারে।</p>
                            </div>
                        </div>

                        <div class="text-end mt-4">
                            <a href="{{ url()->previous() }}" class="btn btn-sm btn-secondary">
                                <span>Back</span>
                            </a>
                            <button type="submit" class="btn btn-sm btn-success">
                                <span>জমা</span>
                            </button>
                        </div>
                    </form>

                    <!--end::Form-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
@endsection

@section('page_script')
    <script nonce="{{ $cspNonce }}">
        $(document).ready(function() {

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

            const refundSection = $('#refund_section');
            const extraSection = $('#extra_section');
            const typeSelect = $('#type');

            // Initialize Select2
            typeSelect.select2();

            // Function to handle visibility
            function handleSectionVisibility() {
                const selectedValue = typeSelect.val();

                // Show/Hide sections based on the selected value
                if (selectedValue === 'REFUND') {
                    refundSection.removeClass('d-none').addClass('d-flex');
                    extraSection.addClass('d-none');
                } else if (selectedValue === 'EXTRA') {
                    extraSection.removeClass('d-none').addClass('d-flex');
                    refundSection.addClass('d-none');
                } else {
                    refundSection.addClass('d-none');
                    extraSection.addClass('d-none');
                }
            }

            // Attach change event to Select2 dropdown
            typeSelect.on('change', handleSectionVisibility);

            // Initial setup to match the current selection
            handleSectionVisibility();
        });
    </script>
@endsection