
    <div class="modal-header">
        <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fal fa-user me-1"></i> {{$head ?? ''}} </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="modal-form">
            <div class="row">

                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('targets.employee_id') }} <span style="color:red">*</span></label>
                    <p class="form-control">
                        {{ $employee->name }}
                    </p>
                    <input type="hidden" name="employee_id" id="employee_id" value="{{ $employee->id }}">
                </div>

                <div class="form-group mb-3">
                    <input onkeyup="FetchTarget()" type="hidden" class="form-control" id="year" name="year" min="1900" max="2100" step="1" placeholder="{{ __('targets.year') }}" value="{{ $request->year ?? '' }}">
                    <label for="" class="d-block mb-2"> {{ __('targets.year') }} <span style="color:red">*</span></label>
                    <p class="form-control">{{ $request->year ?? '' }}</p>
                </div>

                <div class="form-group mb-3 mt-4">
                    <label for="validationServer">{{__('targets.length')}}</label>
                    <div class="row">
                        <div class="col-lg-12 mt-3">
                            <div class="form-group">
                                <!--<input id="yearMonths" class="yearMonths" type="checkbox"  id="length0">-->
                                <!--<label for="length0"> {{ __('targets.lengthes.year') }} </label>-->
                                <div class="form-check pb-2 border-bottom">
                                    <input class="form-check-input yearMonths" type="checkbox"   id="yearMonths">
                                    <label class="form-check-label ms-2" for="yearMonths"> Select All Year </label>
                                </div>
                            </div>
                        </div>
                        @foreach ($lengthes as $row)
                            <div class="col-lg-3">
                                <div class="form-group mt-2">
                                    <div class="form-check">
                                        <input class="form-check-input lengthData" disabled onclick="FetchTarget()" type="checkbox" name="length[]" {{ (in_array($row, ( $months ?? []) ) ? 'checked' : '' ) }} value="{{ $row }}" id="length{{ $row }}">
                                        <label class="form-check-label" for="length{{ $row }}"> {{ __('targets.lengthes.'.$row) }} </label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="form-group mb-3 mt-4">
                    <label for="validationServer">{{__('targets.products')}}</label>
                    <div class="row">
                        @foreach ($products as $row)
                            <div class="col-lg-3">
                                <div class="form-group mt-3">
                                    <!--<input onclick="FetchTarget()" class="products" type="checkbox" name="product_id[]" value="{{ $row->id }}" id="product{{ $row->id }}">-->
                                    <!--<label for="product{{ $row->id }}"> {{ $row->title }} </label>-->
                                    <div class="form-check">
                                        <input class="form-check-input products" disabled onclick="FetchTarget()" type="checkbox" name="product_id[]" {{ ( $request->product_id ?? '') == $row->id ? 'checked' : ''  }} value="{{ $row->id }}" id="product{{ $row->id }}">
                                        <label class="form-check-label" for="product{{ $row->id }}"> {{ $row->title }} </label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="form-group mb-3" id="targets">

                </div>
            </div>

        </div>
    </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close"><span> {{ __('dashboard.cancel') }} </span></button>
        <button type="submit" class="blue-butn butn-st2 butn-md"><span> {{ __('dashboard.save') }} </span></button>
    </div>


<script>
    document.getElementById('yearMonths').addEventListener('change', function () {
        let allLengthCheckboxes = document.querySelectorAll('.length');
        allLengthCheckboxes.forEach(cb => cb.checked = this.checked);
    });

    document.querySelectorAll('.length').forEach(cb => {
        cb.addEventListener('change', function () {
            let allLengthCheckboxes = document.querySelectorAll('.length');
            let allChecked = [...allLengthCheckboxes].every(cb => cb.checked);
            document.getElementById('yearMonths').checked = allChecked;
        });
    });
    function FetchTarget()
    {
        let employee_id = $('#employee_id').val()
        let year = $('#year').val()
        let product_id = $('.products:checked').map(function() {
            return $(this).val();
        }).get();
        let length = $('.lengthData:checked').map(function() {
            return $(this).val();
        }).get();
        $.ajax({
            url : "{{ route('employee.fetch.target.show') }}",
            type : 'GET',
            data: {
                employee_id: employee_id,
                year: year,
                length : length,
                'product_id[]': product_id
            },
            success:function(data)
            {
                $('#targets').html(data);
            }
        })
    }
</script>

@if($request->year ?? false)
    <script>
        FetchTarget()
    </script>
@endif

<script>
    const yearMonths = document.getElementById('yearMonths');
    const quarters = document.querySelectorAll('input[name="length[]"]');
    yearMonths.addEventListener('change', function() {
        quarters.forEach(checkbox => {
            checkbox.checked = yearMonths.checked;
        });
        FetchTarget();
    });
    quarters.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (!this.checked) {
                yearMonths.checked = false;
            }
            else if ([...quarters].every(cb => cb.checked)) {
                yearMonths.checked = true;
            }
            FetchTarget();
        });
    });
</script>

