@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 4px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
    .datepicker table tbody tr:hover {
        background-color: #eee;
    }

    .target-p {
        padding: 0.5rem !important;
    }

    .bussiness .form-group #lable-target-type {
        margin-bottom: 0px;
    }

    #datatable tbody tr td:nth-child(10) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 250px;
        font-size: smaller;
    }

    .target .btn-primary {
        color: #2762e4 !important;
        background-color: #bcd4ff !important;
        border-color: #bcd4ff !important;
        padding-top: 3px;
        padding-bottom: 3px;
        font-weight: 500;
        font-size: 10px;
        width: 62px;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
            <div class="col-xxl-1">
                <div class="page-title-right">
                    <button class="btn btn-primary form-control" onclick="return addTargetReview();" type="button"><span>+ Add Target</span></button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element target">
                <thead class="table-light">
                    <tr>
                        <th>Action</th>
                        <th>Tr.Date </th>
                        <th>Target Start Date </th>
                        <th>Target End Date</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            @csrf
        </div>

        <div class="modal fade" id="modalAddTargetReview" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddTargetReviewLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl mx-auto" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalAddTargetReviewLabel">Add Target</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeTarget"></button>
                    </div>

                    <form id="formAddTargetReview" action="{{route('save.target')}}" method="POST"  novalidate>
                        @csrf
                        <input type="hidden" id="add_target_id" name="add_target_id" class="form-control">

                        <div class="modal-body">
                            <div class="row">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <div class="form-check-inline">
                                                <input class="form-check-input" type="radio" name="target_type" id="target_weekly" value="target-weekly" checked>
                                                <label class="form-check-label me-3" for="target_weekly">Target Weekly</label>
                                                <input class="form-check-input" type="radio" name="target_type" id="target_monthly" value="target-monthly">
                                                <label class="form-check-label me-3" for="target_monthly">Target Monthly</label>
                                            </div>
                                            <div class="mt-3">
                                                <div class="alert alert-info alert-dismissible fade show mb-0" id="target-m" role="alert">The "Target Monthly" feature is coming soon!!</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="weeklyDatePicker" class="form-label"><b>Target Weekly*</b></label>
                                            <input type="text" class="form-control" name="weeklyDatePicker" id="weeklyDatePicker" placeholder="dd-mm-yyyy - dd-mm-yyyy" value="" autocomplete="off" required>
                                            <div class="invalid-feedback help-block with-errors"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-7">
                                        <div class="form-group text-align: center" style="text-align: center;">
                                            <label class="no-outline" class="form-control"><b>This Week Target </b></label>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group text-align:center" style="text-align: center;">
                                            <label class="no-outline" class="form-control"><b>(Month-YY) Total <p id="month-year-display"></p></b></label>
                                        </div>
                                    </div>
                                </div>

                                <div>
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lableBussiness"><b>BUSSINESS TARGET ENTRY</b></label>
                                    </div>
                                </div>

                                <hr style="height:1px; margin:0.3rem 0;  background-color: currentColor;" id="StartLineBuss">

                                <div class="col-md-2 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline " class="form-control" id="lable-target-type"><b>Target Type*</b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-unit"><b>Unit</b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-rate"><b>Rate</b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-nos"><b>Nos</b></label>
                                    </div>
                                </div>

                                <div class="col-md-2 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-value"><b>Value</b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control"><b></b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-rate-m"><b>Rate</b></label>
                                    </div>
                                </div>

                                <div class="col-md-1 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-nos-m"><b>Nos</b></label>
                                    </div>
                                </div>

                                <div class="col-md-2 bussiness">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lable-value-m"><b>Value</b></label>
                                    </div>
                                </div>

                                <hr style="height:1px; margin:0.3rem 0; background-color: currentColor;" id="EndLinebuss">

                                @foreach ($data['target-department'] as $key => $value)
                                <div class="col-lg-2  bussiness target-p">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="target_type_dept_{{$value->id}}">{{$value->text}}</label>
                                    </div>
                                </div>
                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="target_type_dept_{{$value->id}}">Nos.</label>
                                    </div>
                                </div>
                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="plan_price[{{$value->id}}]" id="plan_price_{{$value->id}}" class="form-control form-control-input" value="{{$value->year_price}}" placeholder='{{$value->year_price}}' disabled>
                                    </div>
                                </div>
                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="plan[{{$value->id}}]" id="plan_id_{{$value->id}}" class="form-control form-control-input target-set" placeholder='Nos.' oninput="bussinessTarget('{{$value->id}}')" onkeyup="bussinessTarget('{{$value->id}}')" data-value-id="{{$value->id}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="0" maxlength="7">
                                    </div>
                                </div>
                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_value[{{$value->id}}]" id="target_value_{{$value->id}}" class="form-control form-control-input plan-price-target" data-value-id="{{$value->id}}" placeholder='' disabled>
                                    </div>
                                </div>
                                <div class="col-md-1">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control"><b></b></label>
                                    </div>
                                </div>
                                <div class="col-lg-1  bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="plan_price_monthly[{{$value->id}}]" id="plan_price_monthly{{$value->id}}" class="form-control form-control-input" value="{{$value->year_price}}" placeholder='{{$value->year_price}}' disabled>
                                    </div>
                                </div>
                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">

                                        <input type="text" name="plan_monthly[{{$value->id}}]" id="plan_monthly_id_{{$value->id}}" class="form-control form-control-input target-set-monthly" placeholder='Nos.' data-value-id="{{$value->id}}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_value_monthly[{{$value->id}}]" id="target_value_monthly{{$value->id}}" class="form-control form-control-input plan-price-target-monthly" data-value-id="{{$value->id}}" placeholder='' disabled>
                                    </div>
                                </div>

                                @endforeach

                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="target_type_dept_{{$value->id}}"><b>Total</b></label>
                                    </div>
                                </div>

                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="target_type_dept_{{$value->id}}"><b>Nos.</b></label>
                                    </div>
                                </div>

                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_total" id="target_total" class="form-control form-control-input" placeholder='Total' disabled>
                                    </div>
                                </div>

                                <div class="col-lg-2  bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="plan_total" id="plan_total" class="form-control form-control-input" placeholder='Total' disabled>
                                    </div>
                                </div>

                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group"></div>
                                </div>

                                <div class="col-lg-1 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_total_monthly" id="target_total_monthly" class="form-control form-control-input" placeholder='Total' disabled>
                                    </div>
                                </div>

                                <div class="col-lg-2 bussiness target-p">
                                    <div class="form-group">
                                        <input type="text" name="plan_total_month" id="plan_total_month" class="form-control form-control-input" placeholder='Total' disabled>
                                    </div>
                                </div>

                                <div>
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="lableOperation"><b>OPERATIONAL TARGET ENTRY </b></label>
                                    </div>
                                </div>

                                <hr style="height:1px; margin:0.3rem 0; background-color: currentColor;" id="heightLineStart">

                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-group text-align:left" style="text-align:left;">
                                            <label class="no-outline" class="form-control" id="lableOperationType"><b>Target Type </b></label>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group text-align: center" style="text-align: center;">
                                            <label class="no-outline" class="form-control" id="lableOperationWeek"><b>Target Set </b></label>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-group text-align:center" style="text-align: center;">
                                            <label class="no-outline" class="form-control" id="lableOperationMonth"><b>Target Set</b></label>
                                        </div>
                                    </div>
                                </div>

                                <hr style="height:1px; margin:0.3rem 0; background-color: currentColor;" id="heightLineEnd">

                                @foreach ($data['target-parameters'] as $key => $value)
                                <div class="col-lg-3 col-sm-6 target-p">
                                    <div class="form-group">
                                        <label class="no-outline" class="form-control" id="target_type_para_{{$value->id}}">{{$value->target_type_name}} %</label>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-2 target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_parameters[{{$value->id}}]" id="target_parameters_id_{{$value->id}}" class="form-control form-control-input" placeholder='Target Set %' oninput="operationTargetValue('{{$value->id}}')" onkeypress="return event.charCode >= 48 && event.charCode <= 57" minlength="0" maxlength="7">
                                    </div>
                                </div>
                                <div class="col-lg-2 target-p">
                                    <div class="form-group"></div>
                                </div>

                                <div class="col-lg-3 col-sm-2 target-p">
                                    <div class="form-group">
                                        <input type="text" name="target_parameters_monthly[{{$value->id}}]" id="target_parameters_monthly_id_{{$value->id}}" class="form-control form-control-input" placeholder='Target Set %' disabled>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" id="closebtntarget" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                            <button type="submit" id="savebtn" class="btn btn-primary px-3">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>

<script type="text/javascript">
    var ajaxURLGetTargetWeekly = '{{route("target.weekly.ajax")}}';
    var targetReviewDelete = "{{route('delete.target')}}";
    var targetReviewEdit = "{{route('edit.target')}}";
    var targetReviewCheckExisting = "{{route('target.review.existing')}}";
    var ajaxSearchTargetType = "{{route('search.target.type')}}";
    var csrfToken = $("[name=_token]").val();
    var currentDate = new Date();
    var table, table1;
    var dataOFTargetReview;
    var dataOFFeedback;
    var weeklyDateSelected = null;

    $("#reason_date").datepicker({
        format: "dd-mm-yyyy",
        autoclose: true,
        endDate: currentDate,
        container: "#modalAddReason",
    }).on('changeDate', function() {
        $('.datepicker').hide();
    });

    function bussinessTarget(valueId) {
        var targetSetInputValue = parseFloat(document.getElementById('plan_id_' + valueId).value);
        var planPriceInputValue = parseFloat(document.getElementById('plan_price_' + valueId).value);

        var totalValue = (planPriceInputValue * targetSetInputValue);

        var targetInputs = document.getElementsByClassName('target-set');
        var targetSettotal = 0;
        var targetSetMonthlyTotal = 0;

        for (var i = 0; i < targetInputs.length; i++) {
            var targetInput = targetInputs[i];
            var targetSetInput = parseFloat(document.getElementById('plan_id_' + valueId).value);
            var targetSetInputValue = parseFloat(targetInput.value);
            // if (!isNaN(targetSetInput) && !isNaN(targetSetInputValue)) {
            if (!isNaN(targetSetInputValue)) {
                targetSettotal += targetSetInputValue;
            }
        }

        document.getElementById('target_total').value = isNaN(targetSettotal) ? '' : targetSettotal;
        document.getElementById('target_value_' + valueId).value = isNaN(totalValue) ? '' : totalValue;

        var planInputs = document.getElementsByClassName('plan-price-target');
        var totalValue = 0;
        var target_set_monthly = 0;

        for (var i = 0; i < planInputs.length; i++) {
            var planInput = planInputs[i];
            var targetValueInput = parseFloat(planInput.value);

            if (!isNaN(targetValueInput)) {
                totalValue += targetValueInput;
            }
        }

        document.getElementById('plan_total').value = isNaN(totalValue) ? '' : totalValue;

        var weeklyDate1 = document.getElementById("weeklyDatePicker").value;
        const [startDate1, endDate1] = weeklyDate1.split(" - ");
        const startDateString = startDate1;
        const endDateString = endDate1;
        const dateString = startDateString;
        const parts = dateString.split("-"); // Split the date string into an array ["02", "10", "2023"]
        var Wyear = parseInt(parts[2], 10); // Parse the year part to an integer
        var Wmonth = parseInt(parts[1], 10); // Parse the month part to an integer

        const [selectedStartDay, selectedStartMonth, selectedStartYear] = startDateString.split("-").map(Number);

        for (var i = 0; i < dataOFTargetReview.length; i++) {
            const target_start_date = dataOFTargetReview[i]['target_start_date'];
            const dateString = target_start_date;
            const dateObject = new Date(dateString);

            const year = dateObject.getFullYear(); // Get the year
            const month = dateObject.getMonth() + 1; // Get the month (add 1 since it's zero-based)

            const target_end_date = dataOFTargetReview[i]['target_end_date'];
            const target_set = dataOFTargetReview[i]['target_set'];
            const plan_name = dataOFTargetReview[i]['name'];
            const plan_id = parseFloat(dataOFTargetReview[i]['is_plan']);
            const numericValueId = parseFloat(valueId);

            if (!isNaN(plan_id) && !isNaN(numericValueId) && plan_id === numericValueId && year === Wyear && month === Wmonth) {
                target_set_monthly = target_set_monthly + target_set;
            }

        }

        target_set_monthly_total = target_set_monthly + targetSetInput;
        plan_id = parseFloat(document.getElementById('plan_id_' + valueId).value);

        var totalValueofMonth = (planPriceInputValue * target_set_monthly_total);

        if (isNaN(plan_id)) {
            document.getElementById('plan_monthly_id_' + valueId).value = '';
            document.getElementById('target_value_monthly' + valueId).value = '';
        } else {
            document.getElementById('plan_monthly_id_' + valueId).value = isNaN(target_set_monthly_total) ? '' : target_set_monthly_total;
            document.getElementById('target_value_monthly' + valueId).value = isNaN(totalValueofMonth) ? '' : totalValueofMonth;
        }

        var targetInputsMonthly = document.getElementsByClassName('target-set-monthly');
        var targetSettotal = 0;

        for (var i = 0; i < targetInputsMonthly.length; i++) {

            var targetInputM = targetInputsMonthly[i];

            var targetSetPrevious = parseFloat(document.getElementById('plan_monthly_id_' + valueId).value);

            var targetSetValueMonthly = parseFloat(targetInputM.value);
            // if (!isNaN(targetSetInput) && !isNaN(targetSetValueMonthly)) {
            if (!isNaN(targetSetValueMonthly)) {
                targetSetMonthlyTotal += targetSetValueMonthly;
            }
        }

        document.getElementById('target_total_monthly').value = isNaN(targetSetMonthlyTotal) ? '' : targetSetMonthlyTotal;

        var planMonthly = document.getElementsByClassName('plan-price-target-monthly');
        var totalValueofMonth = 0;
        var target_set_monthly = 0;

        for (var i = 0; i < planMonthly.length; i++) {
            var planInputMonth = planMonthly[i];
            var targetValueMonthly = parseFloat(planInputMonth.value);
            if (!isNaN(targetValueMonthly)) {
                totalValueofMonth += targetValueMonthly;
            }
        }

        document.getElementById('plan_total_month').value = isNaN(totalValueofMonth) ? '' : totalValueofMonth;
    }

    function operationTargetValue(operationValueId) {

        var target_set_feedback_monthly = 0;
        var targetParameters = parseFloat(document.getElementById('target_parameters_id_' + operationValueId).value);

        // (monthly-YY) Total 
        var weeklyDate1 = document.getElementById("weeklyDatePicker").value;
        const [startDate1, endDate1] = weeklyDate1.split(" - ");
        const startDateString = startDate1;
        const endDateString = endDate1;

        const [selectedStartDay, selectedStartMonth, selectedStartYear] = startDateString.split("-").map(Number);
        weekCount = 0;
        weekCountPrv = 0;

        for (var i = 0; i < dataOFTargetReview.length; i++) {
            const target_start_date = dataOFTargetReview[i]['target_start_date'];
            const target_end_date = dataOFTargetReview[i]['target_end_date'];

            const [startDay, startMonth, startYear] = target_start_date.split("-").map(Number);
            const [endDay, endMonth, endYear] = target_end_date.split("-").map(Number);

            if (startMonth === selectedStartMonth || endMonth === selectedStartMonth) {

                const target_set = dataOFTargetReview[i]['target_set'];
                const plan_name = dataOFTargetReview[i]['name'];
                const target_parameters_id = parseFloat(dataOFTargetReview[i]['target_parameters_id']);
                const numericValueId = parseFloat(operationValueId);
                if (!isNaN(target_parameters_id) && !isNaN(numericValueId) && target_parameters_id === numericValueId) {
                    weekCountPrv = weekCountPrv + 1;
                    target_set_feedback_monthly = ((target_set_feedback_monthly + target_set));
                }
            }
        }

        target_set_monthly_feedback_total = target_set_feedback_monthly + targetParameters;
        weekCount = weekCountPrv + 1;
        target_set_monthly_feedback_total = (target_set_monthly_feedback_total / weekCount);

        if (isNaN(targetParameters)) {
            document.getElementById('target_parameters_monthly_id_' + operationValueId).value = '';

        } else {
            document.getElementById('target_parameters_monthly_id_' + operationValueId).value = isNaN(target_set_monthly_feedback_total) ? '' : target_set_monthly_feedback_total.toFixed(2);
        }
    }

    // FOR TARGET AND REVIEW
    function addTargetReview() {
        $('#target_monthly').attr('checked', false).attr('disabled', false);
        $('#weeklyDatePicker').removeClass('is-invalid').next('.invalid-feedback').text('').val('').attr('readonly', false);

        $("#month-year-display").text('');
        $("#add_target_id").val(0);
        $("#modalAddTargetReview").modal('show');
        $('#formAddTargetReview').trigger("reset").removeClass('was-validated');
        $("#modalAddTargetReviewLabel").html("Add Target & Review");
        $("#savebtn").html('Save');
        $('[id^="target_parameters_id_"]').closest('.form-group').show();
        $('[id^="plan_id_"]').closest('.form-group').show();
        $('[id^="target_type_para_"]').closest('.form-group').show();
        $('[id^="target_type_dept_"]').closest('.form-group').show();
        $('[id^="plan_price"]').closest('.form-group').show();
        $('[id^="target_value"]').closest('.form-group').show();
        $('[id^="plan_monthly_id"]').closest('.form-group').show();
        $('[id^="target_total"]').closest('.form-group').show();
        $('[id^="plan_total"]').closest('.form-group').show();
        $('[id^="target_total_monthly"]').closest('.form-group').show();
        $('[id^="plan_total_month"]').closest('.form-group').show();
        $('[id^="target_parameters_monthly_id_"]').closest('.form-group').show();
        $("#lableOperation").closest('.form-group').show();
        $("#lableOperationWeek").closest('.form-group').show();
        $("#lableOperationMonth").closest('.form-group').show();
        $("#lableOperationType").closest('.form-group').show();
        $('[id^="heightLineEnd"]').show();
        $('[id^="heightLineStart"]').show();
        $("#lableBussiness").closest('.form-group').show();
        $(".bussiness").show();
    }

    const target_m = document.getElementById("target_monthly");
    target_m.addEventListener("click", () => {
        $("#target-m").show();
    });

    $(document).ready(function() {
        $("#target-m").hide();

        let previousDate = null;

        $("#weeklyDatePicker").datepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            orientation: 'bottom',
            container: "#modalAddTargetReview",
            weekStart: 1,
        }).on("changeDate input", function(event) {
            const selectedDate = new Date(document.getElementById("weeklyDatePicker").value);

            if (selectedDate.getTime() !== previousDate?.getTime()) {
                const startDate = new Date(selectedDate);
                const endDate = new Date(selectedDate);

                if (selectedDate.getDay() === 0) { // If Sunday
                    startDate.setDate(selectedDate.getDate() - 6); // Go back by 6 days to get the previous Monday
                    endDate.setDate(selectedDate.getDate());
                } else {
                    startDate.setDate(selectedDate.getDate() - (selectedDate.getDay() - 1));
                    endDate.setDate(selectedDate.getDate() + (7 - selectedDate.getDay()));
                }

                let weeklyDateRange = "";

                while (startDate <= endDate) {
                    if (startDate.getMonth() === selectedDate.getMonth()) {
                        endDayOfWeek = ("0" + startDate.getDate()).slice(-2) + "-" + ("0" + (startDate.getMonth() + 1)).slice(-2) + "-" + startDate.getFullYear();
                        weeklyDateRange += ("0" + startDate.getDate()).slice(-2) + "-" + ("0" + (startDate.getMonth() + 1)).slice(-2) + "-" + startDate.getFullYear() + ", ";
                    }
                    startDate.setDate(startDate.getDate() + 1); // Move to the next day
                }

                weeklyDateRange = weeklyDateRange.slice(0, -2);

                const dateArray = weeklyDateRange.split(", ");

                const firstDayOfWeek = dateArray[0];
                weeklyDateSelected = firstDayOfWeek + " - " + endDayOfWeek;

                $("#weeklyDatePicker").val(weeklyDateSelected);
                // show error msg target already exits

                var currentValue = $(this).val();

                // Regular expression to match the desired format
                var dateFormat = /^\d{2}-\d{2}-\d{4}\s*-\s*\d{2}-\d{2}-\d{4}$/;

                // Check if the current value matches the desired format
                if (!dateFormat.test(currentValue)) {
                     $("#weeklyDatePicker").val("");
                     $('#weeklyDatePicker').addClass('is-invalid').next('.invalid-feedback').text('Invalid date format. Please enter dates in the format DD-MM-YYYY - DD-MM-YYYY');
                    // You can add further actions here, like displaying an error message to the user
                } else {
                    $(this).removeClass('is-invalid').next('.invalid-feedback').text('');
                }
                var weeklyDate = $("#weeklyDatePicker").val();

                if (currentValue == '') {
                    $('#weeklyDatePicker').removeClass('is-invalid').next('.invalid-feedback').text('');
                } else {
                    $.ajax({
                        type: 'GET',
                        url: targetReviewCheckExisting + "?weeklyDate=" + weeklyDate,
                        success: function(resultData) {
                            if (resultData['data']['status'] == 0) {
                                $('#weeklyDatePicker').addClass('is-invalid').next('.invalid-feedback').text('Target already exists and Go to Edit and enter your data.');

                                if (resultData['data']['msg'] == "Target already existing") {

                                    swal.fire({
                                        title: "Target Already Existing!",
                                        text: "You can be able to edit this?",
                                        showCancelButton: true,
                                        confirmButtonColor: "#526BDF",
                                        cancelButtonColor: "#EC6767",
                                        confirmButtonText: "Yes, Edit it!",
                                        cancelButtonText: "No, cancel it!",
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            editTargetReview(resultData['id']);
                                        } else {
                                            // $("#modalAddTargetReview").modal('show');
                                            $('#weeklyDatePicker').removeClass('is-invalid').next('.invalid-feedback').text('').val('');
                                            $("#month-year-display").text('');
                                            $("#weeklyDatePicker").val('');
                                        }
                                    });
                                }
                            } else {
                                $('#weeklyDatePicker').removeClass('is-invalid').next('.invalid-feedback').text('');
                            }
                        }
                    });
                }

                const month = startDate.getMonth() + 1; // Months are zero-based, so add 1
                const year = startDate.getFullYear();
                $('#month-year-display').text(month + "-" + year);
                previousDate = selectedDate; // Update the previously selected date
            }

            $('input[id^="plan_id_"]').val(''); // Clear all plan_id inputs
            $('input[id^="target_value_"]').val('');
            $('input[id^="plan_monthly_id_"]').val('');
            $('input[id^="plan_monthly_id_"]').val('');
            $('input[id^="target_value_monthly"]').val('');
            $('input[id^="target_total"]').val('');
            $('input[id^="plan_total"]').val('');
            $('input[id^="target_total_monthly"]').val('');
            $('input[id^="plan_total_month"]').val('');
            $('input[id^="target_parameters_id_"]').val('');
            $('input[id^="target_parameters_id_"]').val('');
            $('input[id^="target_parameters_monthly_id_"]').val('');

            $(".datepicker").hide();
        });

        // show only month
        $("#target_month").datepicker({
            format: 'mm-yyyy',
            minViewMode: 'months',
            autoclose: true,
            container: "#modalAddTargetReview",
        }).on('show', function() {
            $('.datepicker-days').hide();
        });
    });

    $('#target_month').attr('disabled', true);

    $('#target_weekly').on('click', function() {
        $('#target_month').val('');
        $("#target-m").hide();
        var cb = $('#target_weekly').is(':checked');
        $('#target_month').attr('disabled', true);
        $('#weeklyDatePicker').attr('disabled', false);
    });

    $('#target_monthly').on('click', function() {
        $('#weeklyDatePicker').val('');
        var cb = $('#target_monthly').is(':checked');
        $('#target_month').prop('disabled', !cb);
        $('#weeklyDatePicker').attr('disabled', true);
        $('#target_month').attr('disabled', true);
    });

    table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": false,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 320},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxURLGetTargetWeekly,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "action","bSortable": false},
            {"mData": "tr_date"},
            {"mData": "target_start_date"},
            {"mData": "target_end_date"},
        ]
    });
    
    table.on('xhr', function() {
        var responseData = table.ajax.json();
        dataOFTargetReview = responseData.target;
        dataOFFeedback = responseData.feeback;
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

        $('#formAddTargetReview').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form) {

        if (responseText['data']['status'] == 1) {

            toastr["success"](responseText['data']['msg']);

            $('#formAddTargetReview').trigger("reset").removeClass('was-validated');
            $('#weeklyDatePicker').val('')
            $("#modalAddTargetReview").modal('hide');
            $("#modalAddTargetReview").hide();
            $('#datatable').DataTable().ajax.reload(null, false);

            resetInputForm();
            if (responseText['data']['key'] == 'Reason') {}
        } else if (responseText['data']['status'] == 0) {

            toastr["error"](responseText['data']['msg']);
        }
    }

    function resetInputForm() {
        $('#formAddTargetReview').trigger("reset").removeClass('was-validated');
        $("#weeklyDatePicker").val("").prop('disabled', false).attr('readonly', false);
    }

    // close modal set serch fields null
    $(document).ready(function() {
        $("#closeTarget").click(function() {
            $("#weeklyDatePicker").val('').prop('disabled', false).attr('readonly', false);
            $('#formAddTargetReview').trigger("reset").removeClass('was-validated');
            $("#target-m").hide();

        });

        $("#closebtntarget").click(function() {
            $("#weeklyDatePicker").val('').prop('disabled', false).attr('readonly', false);
            $('#formAddTargetReview').trigger("reset").removeClass('was-validated');
            $("#target-m").hide();
        });
    });

    // edit reason  
    function editTargetReviewReason(id) {

        $.ajax({
            type: 'GET',
            url: targetReviewReasonEdit + "?id=" + id,
            success: function(resultData) {
                if (resultData['msg']['status'] == 1) {
                    $("#formAddReason").trigger('reset').removeClass('was-validated');
                    $("#modalAddReason").modal('show');

                    $("#modalAddReasonLabel").html("Edit Reason #" + id);
                    $("#reason_save").html('Update');
                    $("#reason_id").val(resultData['data']['id']);
                    $("#target_id").val(resultData['data']['target_review_id']);
                    $("#reason_date").val(resultData['data']['reason_date']);
                    $("#reason").val(resultData['data']['reason']);
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }
    // delete target and review

    function deleteTargetReview(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: targetReviewDelete + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

    function editTargetReview(id) {
        $('#target_monthly').attr('checked', false).attr('disabled', 'disabled');
        $('#target_month').val('');
        $('#weeklyDatePicker').removeClass('is-invalid').next('.invalid-feedback').text('');
        $("#month-year-display").text('');

        $.ajax({
            type: 'GET',
            url: targetReviewEdit + "?id=" + id,
            success: function(resultData) {
                if (resultData['msg']['status'] == 1) {
                    var target_data = resultData['data']['target_data'];
                    $("#modalAddTargetReview").modal('show');
                    $("#modalAddTargetReviewLabel").html("Edit Target #" + id);
                    $("#savebtn").show().html('Update');
                    $("#add_target_id").val(id);
                    $('.form-control-input').css({
                        "margin-bottom": "15px"
                    });

                    if (resultData['data']['target_type'] == "target-monthly") {
                        $('#target_monthly').prop('checked', true);
                        $('#target_weekly').prop('checked', false);
                        $("#target_month").val(resultData['data']['target_date']).prop('disabled', true);
                        $('#weeklyDatePicker').attr('readonly', true);

                    } else if (resultData['data']['target_type'] == "target-weekly") {
                        $('#target_monthly').attr('checked', false).attr('disabled', 'disabled');
                        $('#target_weekly').prop('checked', true);
                        $('#weeklyDatePicker').attr('readonly', true);

                        $(document).on('click', function(e) {
                            if ($(e.target).closest('#weeklyDatePicker').length === 0) {
                                $("#weeklyDatePicker").val();
                            }
                        });

                        $("#month-year-display").text(resultData['data']['month_year_display']);
                        $("#weeklyDatePicker").val(resultData['data']['target_date']);

                        var targetSettotal = 0;
                        var targetValueTotal = 0;
                        var target_set_monthly = 0;
                        var targetMonthlySettotal = 0;
                        var targetValueMonth = 0;
                        var plan_id;
                        var target_parameters_id;

                        for (var i = 0; i < target_data.length; i++) {
                            if (target_data[i]['is_plan'] != 0) {
                                plan_id = target_data[i]['is_plan'];
                                teargetSet = target_data[i]['target_set'];
                                $("#plan_id_" + plan_id).val(target_data[i]['target_set']);
                                if (!isNaN(teargetSet)) {
                                    targetSettotal += teargetSet;
                                }
                                var targetSetInputValue = parseFloat(document.getElementById('plan_id_' + plan_id).value);
                                var planPriceInputValue = parseFloat(document.getElementById('plan_price_' + plan_id).value);

                                var totalValue = (planPriceInputValue * targetSetInputValue);
                                document.getElementById('target_value_' + plan_id).value = isNaN(totalValue) ? '' : totalValue;
                                if (!isNaN(totalValue)) {
                                    targetValueTotal += totalValue;
                                }
                            }

                            if (target_data[i]['target_parameters_id'] != 0) {
                                target_parameters_id = target_data[i]['target_parameters_id'];
                                $("#target_parameters_id_" + target_parameters_id).val(target_data[i]['target_set'].toFixed(2));
                            }
                        }

                        document.getElementById('target_total').value = isNaN(targetSettotal) ? '' : targetSettotal;
                        document.getElementById('plan_total').value = isNaN(targetValueTotal) ? '' : targetValueTotal;

                        var countTargetMonthlySet = resultData['data']['monthlyArr'];

                        for (var j = 0; j < target_data.length; j++) {
                            plan_id = target_data[j]['is_plan'];
                            target_parameters_id = target_data[j]['target_parameters_id'];

                            if (target_data[j]['is_plan'] != 0) {
                                var planPriceInputValue = parseFloat(document.getElementById('plan_price_' + plan_id).value);
                                document.getElementById('plan_monthly_id_' + plan_id).value = isNaN(countTargetMonthlySet['plan_monthly_id_' + plan_id]) ? '' : countTargetMonthlySet['plan_monthly_id_' + plan_id];
                                totalValueofMonth = planPriceInputValue * countTargetMonthlySet['plan_monthly_id_' + plan_id];
                                document.getElementById('target_value_monthly' + plan_id).value = isNaN(totalValueofMonth) ? '' : totalValueofMonth;
                                totaltarget = countTargetMonthlySet['plan_monthly_id_' + plan_id]
                                targetMonthlySettotal += countTargetMonthlySet['plan_monthly_id_' + plan_id];
                                targetValueMonth += totalValueofMonth;
                            }

                            if (target_data[j]['target_parameters_id'] != 0) {

                                document.getElementById('target_parameters_monthly_id_' + target_parameters_id).value = isNaN(countTargetMonthlySet['target_parameters_monthly_id_' + target_parameters_id]) ? '' : countTargetMonthlySet['target_parameters_monthly_id_' + target_parameters_id].toFixed(2);
                            }
                        }

                        document.getElementById('target_total_monthly').value = isNaN(targetMonthlySettotal) ? '' : targetMonthlySettotal;
                        document.getElementById('plan_total_month').value = isNaN(targetValueMonth) ? '' : targetValueMonth;

                        $('#weeklyDatePicker').prop('disabled', true);
                        $('#target_month').prop('disabled', true);
                    }
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }
</script>
@endsection