@extends('master')

@section('title', 'Report Header Setting')
@section('breadcrumbMainTitle', 'Report Header Setting')

<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">Report Header Setting</span>
                    </h3>
                </div>
                <!--end::Header-->
                <!--begin::Card body-->
                <div class="card-body py-3 mt-5">
                    @include('message')

                    <!--begin::Form-->
                    <form class="form" id="form" method="POST"
                        action="{{ route('hrm.employee.codeSetting.store') }}">
                        @csrf
                        <div class="modal-body py-10 px-lg-17">
                            <div class="row mb-5">

                                <input type="text" hidden name="salary_code_id" id="salary_code_id">

                                <div class="row mb-3">
                                    <div class="col-md-6 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Employee Category :</label>
                                        <select name="category_id" id="category_id" aria-label="Select a code"
                                            data-control="select2" data-placeholder="Select a code"
                                            class="form-select form-control form-select-solid code-select">
                                            <option value=""></option>
                                            @foreach ($employeeCategory as $code)
                                                <option value="{{ $code->category_id }}">{{ $code->category_type }}</option>
                                            @endforeach
                                        </select>
                                        @error('category_id')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Report Type :</label>
                                        <select name="salary_code_type" id="salary_code_type"
                                            class="form-control form-control-solid @error('salary_code_type') is-invalid @enderror">
                                            <option value="" disabled selected>Choose a Report Type</option>
                                            <option value="COMMON">COMMON</option>
                                            <option value="INDIVIDUAL">INDIVIDUAL</option>
                                        </select>
                                        @error('salary_code_type')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div id="alert-message" style="display: none;" class="alert alert-warning">
                                    You have already created topsheet headers list. You can only update it now.
                                </div>
                                {{-- Divider --}}
                                <div class="mt-8 mb-10 border-bottom border-2">
                                    <label class="fs-5 fw-bold mb-3">Header:</label>
                                </div>

                                <div id="input-container" class="row mb-3">
                                    <div class="col-md-3 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Economic code :</label>
                                        <select name="code_id[]" aria-label="Select a code" data-control="select2"
                                            data-placeholder="Select a code"
                                            class="form-select form-control 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-3 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Report Header :</label>
                                        <select name="code_type[]" class="form-control form-control-solid code-input">
                                            <option value="" disabled selected>Select</option>
                                            <option value="BHATA">BHATA</option>
                                            <option value="KORTON">KORTON </option>
                                        </select>
                                    </div>
                                    <div class="col-md-3 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Code Identification :</label>
                                        <select name="code_identification[]"
                                            class="form-control form-control-solid @error('code_identification') is-invalid @enderror">
                                            <option value="" disabled selected>Choose an option</option>
                                            <option value="BASIC_SALARY">BASIC SALARY</option>
                                            <option value="HOUSE_RENT">HOUSE_RENT</option>
                                            <option value="MEDICAL">MEDICAL</option>
                                            <option value="BONUS">BONUS</option>
                                            <option value="PROVIDENT_FUND">PROVIDENT FUND</option>
                                            <option value="LOAN">LOAN</option>
                                            <option value="INCOME_TAX">INCOME TAX</option>
                                            <option value="OTHER">OTHER</option>
                                        </select>
                                        @error('code_identification')
                                            <span class="text-danger mt-2">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="col-md-3 fv-row mb-3">
                                        <label class="required fs-5 fw-bold mb-1">Header position :</label>
                                        <input type="number" class="form-control form-control-solid position-select"
                                            placeholder="Enter Report position" name="position[]" id="position"
                                            min="1" step="1" />
                                    </div>
                                </div>

                                @error('code_id.*')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                                @error('code_type.*')
                                    <span class="text-danger d-block">{{ $message }}</span>
                                @enderror
                                @error('position.*')
                                    <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>
                        </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" id="submit-button" class="btn btn-success">
                                <span class="indicator-label">জমা</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() {
            const $categoryId = $('#category_id');
            const $salaryCodeType = $('#salary_code_type');
            const $form = $('#form');
            const $alertMessage = $('#alert-message');
            const $submitButton = $('#submit-button');
            const $inputContainer = $('#input-container');
            const $addMoreButton = $('#add-more'); // Reference to the "Add More" button

            // Function to check if all fields are filled
            function checkFields() {
                let allFilled = true;

                // Check if all required fields inside input-container have a value
                $inputContainer.find('input, select').each(function() {
                    if ($(this).val() === "" || $(this).val() === null) {
                        allFilled = false;
                        return false; // Exit loop early if an empty field is found
                    }
                });

                // Enable or disable the "Add More" button based on all fields being filled
                $addMoreButton.prop('disabled', !allFilled);
            }
            // AJAX check selection for combination
            function checkSelection() {
                const categoryIdValue = $categoryId.val();
                const salaryCodeTypeValue = $salaryCodeType.val();

                if (categoryIdValue && salaryCodeTypeValue) {
                    $.ajax({
                        url: "{{ route('hrm.employee.codeSetting.checkSelection') }}",
                        type: 'POST',
                        data: {
                            category_id: categoryIdValue,
                            salary_code_type: salaryCodeTypeValue,
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(data) {
                            if (data.exists) {
                                $alertMessage.show();
                                $submitButton.prop('disabled', true);
                                $form.off('submit');
                            } else {
                                $alertMessage.hide();
                                $submitButton.prop('disabled', false);
                                $form.on('submit', function() {}); // Add submit functionality back
                            }
                        },
                        error: function() {
                            console.error('Error checking selection.');
                        }
                    });
                }
            }
            // Listen for changes on fields to recheck

            $categoryId.on('change', checkSelection);
            $salaryCodeType.on('change', checkSelection);
            $categoryId.on('change', () => $alertMessage.hide());
            $salaryCodeType.on('change', () => $alertMessage.hide());
            // Add new row
            $addMoreButton.click(function() {
                const newRow = `
                        <div class="row mb-3">
                            <div class="col-md-3 fv-row mb-3">
                                <label class="required fs-5 fw-bold mb-1">Economic code :</label>
                                <select name="code_id[]" aria-label="Select a code" data-control="select2" data-placeholder="Select a code" class="form-select form-control 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-3 fv-row mb-3">
                                <label class="required fs-5 fw-bold mb-1">Report Header :</label>
                                <select name="code_type[]" class="form-control form-control-solid code-input">
                                    <option value="" disabled selected>Choose an option</option>
                                    <option value="BHATA">BHATA</option>
                                    <option value="KORTON">KORTON</option>
                                </select>
                            </div>

                            <div class="col-md-3 fv-row mb-3">
                                <label class="required fs-5 fw-bold mb-1">Code Identification :</label>
                                <select name="code_identification[]" class="form-control form-control-solid">
                                    <option value="" disabled selected>Choose an option</option>
                                    <option value="BASIC_SALARY">BASIC SALARY</option>
                                    <option value="HOUSE_RENT">HOUSE_RENT</option>
                                    <option value="MEDICAL">MEDICAL</option>
                                    <option value="BONUS">BONUS</option>
                                    <option value="PROVIDENT_FUND">PROVIDENT FUND</option>
                                    <option value="OTHER">OTHER</option>
                                </select>
                            </div>
                            <div class="col-md-3 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">Report position :</label>
                                <input type="number" class="form-control form-control-solid position-select" placeholder="Enter Report position" name="position[]" min="1" />
                            </div>

                            <button type="button" class="btn btn-danger mt-8 btn-icon remove-row">
                                    <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>`;

                $inputContainer.append(newRow);
                $inputContainer.find('select[data-control="select2"]').last().select2();

                // Recheck the fields after adding the new row
                checkFields();

                // Bind change event on the newly added fields to check them dynamically
                $inputContainer.find('input, select').on('change', checkFields);
            });
            // Remove row functionality
            $inputContainer.on('click', '.remove-row', function() {
                $(this).closest('.row').remove();
                checkFields(); // Recheck after removing a row
            });
            // Initial field check
            checkFields();
            // Bind change event to dynamically added fields for checkFields
            $inputContainer.on('change', 'input, select', checkFields);
        });
    </script>
@endsection