@extends('master')

@section('title', 'Edit Report Header Setting')
@section('breadcrumbMainTitle', 'Edit 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;
    }

    .ml-20 {
        margin-left: 10px;
        /* Add left margin to this item */
    }
</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">Edit 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.update') }}">
                        @csrf
                        @method('PUT') <!-- Specify the HTTP verb as PUT for updates -->
                        <div class="modal-body py-10 px-lg-17">
                            <div class="row mb-5">


                                <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"
                                            class="form-select form-control form-select-solid code-select">
                                            <option value=""></option>
                                            @foreach ($employeeCategory as $code)
                                                <option value="{{ $code->category_id }}"
                                                    @if ($code->category_id == $salaryCodeType->category_id) selected @endif>
                                                    {{ $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" @if ($salaryCodeType->salary_code_type == 'COMMON') selected @endif>COMMON
                                            </option>
                                            <option value="INDIVIDUAL" @if ($salaryCodeType->salary_code_type == 'INDIVIDUAL') selected @endif>
                                                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 input-container mb-3">
                                    @foreach ($data as $header)
                                        <input type="text" hidden name="salary_code_id[]" id="salary_code_id[]"
                                            value="{{ $header->salary_code_id }}">

                                        <div class="economic-code-block d-flex">
                                            <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[]"
                                                    class="form-select form-control form-select-solid code-select">
                                                    <option value=""></option>
                                                    @foreach ($codes as $code)
                                                        @include('voucher.partials.optionsEditForm', [
                                                            'code' => $code,
                                                            'item' => $header,
                                                        ])
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-3 fv-row mb-3 ml-20">
                                                <label class="required fs-5 fw-bold mb-1">Report Header :</label>
                                                <select name="code_type[]" class="form-control form-control-solid">
                                                    <option value="" disabled selected>Select</option>
                                                    <option value="BHATA"
                                                        @if ($header->code_type == 'BHATA') selected @endif>BHATA</option>
                                                    <option value="KORTON"
                                                        @if ($header->code_type == 'KORTON') selected @endif>KORTON</option>
                                                </select>
                                            </div>

                                            <div class="col-md-3 fv-row mb-3 ml-20">
                                                <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"
                                                        @if ($header->code_identification == 'BASIC_SALARY') selected @endif>BASIC SALARY
                                                    </option>
                                                    <option value="HOUSE_RENT"
                                                        @if ($header->code_identification == 'HOUSE_RENT') selected @endif>HOUSE_RENT
                                                    </option>
                                                    <option value="MEDICAL"
                                                        @if ($header->code_identification == 'MEDICAL') selected @endif>MEDICAL</option>
                                                    <option value="BONUS"
                                                        @if ($header->code_identification == 'BONUS') selected @endif>BONUS</option>
                                                    <option value="PROVIDENT_FUND"
                                                        @if ($header->code_identification == 'PROVIDENT_FUND') selected @endif>PROVIDENT FUND
                                                    </option>
                                                    <option value="INCOME_TAX"
                                                        @if ($header->code_identification == 'INCOME_TAX') selected @endif>INCOME TAX
                                                    </option>
                                                    <option value="LOAN"
                                                        @if ($header->code_identification == 'LOAN') selected @endif>LOAN</option>
                                                    <option value="OTHER"
                                                        @if ($header->code_identification == 'OTHER') selected @endif>OTHER</option>
                                                </select>
                                            </div>

                                            <div class="col-md-2 fv-row mb-3 ml-20">
                                                <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[]"
                                                    value="{{ $header->position }}" min="1" step="1" />
                                            </div>
                                            <button type="button" class="ml-20 btn btn-danger mt-8 btn-icon remove"
                                                data-index="{{ $header->salary_code_id }}">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    @endforeach


                                </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 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>
                            </div>
                        </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');
            // Add event listener for the remove button
            $(document).on('click', '.remove', function() {
                var index = $(this).data('index');

                // Remove the row from the DOM
                if ($('.economic-code-block').length > 1) {
                    // Remove the closest .economic-code-block element
                    $(this).closest('.economic-code-block').remove();
                }

                // Mark this index as deleted in a hidden input field (or send it in the request)
                var deletedInput = $('<input>').attr({
                    type: 'hidden',
                    name: 'deleted_ids[]',
                    value: index
                });
                $('#form').append(deletedInput);
            });

            // 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="INCOME_TAX">INCOME TAX</option>
                                    <option value="LOAN" @if ($header->code_identification == 'LOAN') selected @endif>LOAN</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