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

<style>
    #datatable1_wrapper .row:first-child > div,
    #datatable1_wrapper .row:last-child > div {
        width: 50%;
    }

    #datatable1 td{
        padding:0.4rem;
    }
    .amt-show-right {
      text-align:right;
    }

    @media (min-width: 768px){
        .col-md-2 {
            width: 25.66% !important;
        }
    }

    @media (max-width: 575px){
        #spaceRemove_1 {
            display: none;
        }
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <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" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
            <div class="col-md-1">
                <div class="page-title-right">
                    <button class="btn btn-primary px-4 form-control" onclick="return addTargetReview();" type="button"><span>+ Add</span></button>
                </div>
            </div>
        </div>
        <!-- end page title -->       
        
        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" title="LearningVideo" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-xl-3 col-sm-4">
                                    <div class="mb-3">
                                        <label for="from_month" class="form-label">From Month</label>
                                        <input type="text" class="form-control" name="from_month" id="from_month" placeholder="From Month" value="" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-4">
                                    <div class="mb-3">
                                        <label for="to_month" class="form-label">To Month</label>
                                        <input type="text" class="form-control" name="to_month" id="to_month" placeholder="To Month" value="{{date('m-Y')}}" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-xl-3 col-sm-4">
                                    <div class="mb-3">
                                        <label for="btnClear" class="form-label extra_space" id="spaceRemove_1">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                        <button type="button" onclick="clearFilterFields();" class="form-control btn btn-primary" id="btnClear">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3 search-value">
                        <div class="text-center">
                          <span class="alert-warning alert-animation px-3 py-1 rounded-3">Filter is applied...</span>              
                        </div>
                    </div>
                    
                    <br>
                    
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Transaction Date<br><input type="text" class="form-control" name="transaction_date" placeholder="Search" maxlength="10" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Transaction Num.<br><input type="text" class="form-control" name="transaction_num" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Target Month<br><input type="text" class="form-control" name="month_target" placeholder="Search" maxlength="7" autocomplete="off" style="width: 100px; height: 25px" maxlength="7"></th>
                                    <th>Target Type<br><input type="text" class="form-control" name="target_type_column" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Department<br><input type="text" class="form-control" name="department" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Factor<br><input type="text" class="form-control" name="factor" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Target Amt.<br><input type="text" class="form-control" name="target_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px"></th>
                                    <th>Achieved Amt.<br><input type="text" class="form-control" name="achived_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                    <th>Difference Amt.<br><input type="text" class="form-control" name="differance_amt" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                    <th>Reason<br><input type="text" class="form-control" name="reason_search" placeholder="Search" autocomplete="off" style="width: 100px; height: 25px" disabled></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>

                    <div class="col-md-12 mt-5">
                        <div class="row">
                            <div class="col-md">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-header text-center font-size-13">Total Target Amount<br><div id="total_target_amt"></div></div>
                                </div>
                            </div>
                            <div class="col-md">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">Total Achieved Amount<br><div id="total_achived_amt"></div></div>
                                </div>
                            </div>
                            {{-- <div class="col-md">
                                <div class="card text-white bg-dark mb-3">
                                    <div class="card-header text-center font-size-13">Total Expense Amount<br><div id="total_expence_amt"></div></div>
                                </div>
                            </div> --}}
                            <div class="col-md">
                                <div class="card text-white bg-secondary mb-3">
                                    <div class="card-header text-center font-size-13">Total Difference Amount<br><div id="total_diffrance_amt"></div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>

<!-- ADD TARGET REASON MODAL -->
<div class="modal fade" id="modalAddReason" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAddReasonLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAddReasonLabel">Add Reason</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form id="formAddReason" action="{{route('save.reason')}}" method="POST" class="needs-validation" novalidate>
                    @csrf
                    <input type="hidden" id="target_id" name="target_id" class="form-control">
                    <input type="hidden" id="reason_id" name="reason_id" class="form-control">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="reason_date" class="form-label">Reason Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="reason_date" id="reason_date" placeholder="Select Date" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="reason" class="form-label">Reason<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="reason" id="reason" value=""  placeholder="Enter Reason" required maxlength="200" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label class="form-label extra_space" for="reason_save">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="submit" id="reason_save" class="btn btn-primary form-control">Save</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="dropdown-divider"></div>
               
                <div class="table-responsive">
                    <table id="datatable1" class="table align-middle table-nowrap table-striped display nowrap w-100">   
                        <thead class="table-light">
                            <tr>
                                <th>Action</th>
                                <th>Reason Date</th>
                                <th>Reason</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    @csrf
                </div>
            </div>

            <div class="modal-footer">
                <button type="button"  class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- END ADD TARGET MODAL -->

<!-- ADD TARGET MODAL -->
<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-lg" 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"></button>
            </div>

            <form id="formAddTargetReview" action="{{route('save.target.review')}}" method="POST" class="needs-validation" 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="col-md-6">
                            <div class="mb-3">
                                <label for="target_transaction_date" class="form-label">Transaction Date<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="target_transaction_date" id="target_transaction_date" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="target_transaction_number" class="form-label">Transaction Number<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="target_transaction_number" id="target_transaction_number" readonly value="" required>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <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="bussiness_target" value="Business Target" checked>
                                    <label class="form-check-label me-3" for="bussiness_target">Business Target</label>
                                    <input class="form-check-input" type="radio" name="target_type" id="commission_income_target" value="Commission Income Target">
                                    <label class="form-check-label me-3" for="commission_income_target">Commission Income Target</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="target_month" class="form-label">Target Month<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="target_month" id="target_month" placeholder="mm-yyyy" value="" autocomplete="off" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="target_department" class="form-label">Select Department<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="target_department" name="target_department" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="target_factor" class="form-label">Select Factor<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="target_factor" name="target_factor" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="target_amount" class="form-label">Target Amount<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="target_amount" id="target_amount" maxlength="12" onkeypress="return isNumber(event);" placeholder="Target Amount" value="" autocomplete="off" required>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="closebtn" 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>
<!-- END ADD TARGET MODAL -->

@endsection

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

<script type="text/javascript">
    var ajaxSearchTargetDepartment = "{{route('search.target.department')}}";
    var ajaxSearchTargetFactor = "{{route('search.target.factor')}}";
    var ajaxURLGetTarget = "{{route('target.review.ajax')}}";
    var targetReviewDetails = "{{route('target.review.details')}}";
    var targetReviewDelete = "{{route('delete.target.review')}}";
    var targetReviewReasonDelete = "{{route('delete.target.review.reason')}}";
    var targetReviewReasonDetails = "{{route('target.review.reason.details')}}";
    var ajaxURLGetTargetReason = "{{route('target.review.reason.ajax')}}";
    var currentDate = new Date();
    var csrfToken = $("[name=_token").val();
    var table,table1;

    $(".search-value").fadeOut();

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

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

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

    $("#from_month").on('change',function(){
        var FromMonth = $(this).val();
        var ToMonth = $("#to_month").val();
        
        var fromDate = new Date("01-" + FromMonth);
        var toDate = new Date("01-" + ToMonth);
        if(fromDate >= toDate){
            $("#to_month").datepicker("destroy").val('');
        }
        
        $(".search-value").fadeIn();

        $("#to_month").attr("disabled", !FromMonth).datepicker("destroy").datepicker({
            format: 'mm-yyyy',
            minViewMode: 'months',
            autoclose: true,
            orientation: 'bottom',
            startDate: FromMonth,
        }).on('show', function () {
            $(".search-value").fadeIn();
            $('.datepicker-days').hide();
        });        
    });

    Inputmask({
        alias: "datetime",
        inputFormat: "mm-yyyy",
        placeholder: "mm-yyyy",
        min: "01-1800", // Set your minimum date if needed
        max: "12-2500", // Set your maximum date if needed
    }).mask($("#from_month, #to_month, #target_month"));

    $('#target_amount').on('input paste', function(){
        let value = $(this).val();

        // Remove leading zeros but keep "0" if it's the only digit
        value = notAllZeroAmt(value);

        // Set the cleaned value back to the input field
        $(this).val(value);            
    });

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

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

    function showRequest(formData, jqForm, options) {
        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);

            $("#formAddTargetReview").removeClass('was-validated');

            $("#modalAddTargetReview").modal('hide');

            $('#datatable').DataTable().ajax.reload(null, false);

            if(responseText['key'] == 'Reason'){
                AddReason(responseText['data']['id']);              
                $('#datatable1').DataTable().ajax.reload(null, false);
            }
        }else{
            if (typeof responseText['data'] !== "undefined") {

                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        if(key == 'msg' || key == 'target_month' || key == 'target_department' || key == 'target_factor' || key == 'target_amount'){
                            toastr["error"](value);       
                        }
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }

            if(responseText['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(responseText['data']['id']);
                }else{
                    $("#modalAddTargetReview").modal('hide');
                }});
            }
        }
    }   

    table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}],
        "order":[[ 3, 'desc' ]],
        "ordering": true,
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 300; },
        "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": ajaxURLGetTarget,
            "type": "POST",
            "data": {
                "_token": csrfToken,
                "from_month":function(){return $("#from_month").val();},
                "to_month":function(){return $("#to_month").val();},
            }
        },  
        "aoColumns" : [
            {"mData" : "action","bSortable": false},
            {"mData" : "transaction_date"},
            {"mData" : "transaction_number"},
            {"mData" : "month_target"},
            {"mData" : "target_type"},
            {"mData" : "department"},
            {"mData" : "factor"},
            {"mData" : "target_amt",
                // "createdCell": function (td, cellData, rowData, row, col) {
                    // $(td).css('text-align', 'right');
                // }
            },
            {"mData" : "achived_amt","bSortable": false,
                // "createdCell": function (td, cellData, rowData, row, col) {
                    // $(td).css('text-align', 'right');
                // }
            },
            {"mData" : "differance_amt","bSortable": false ,
                // "createdCell": function (td, cellData, rowData, row, col) {
                    // $(td).css('text-align', 'right');
                // }
            },
            {"mData" : "reason","bSortable": false},
        ]
    });

    $('#from_month, #to_month').on('change', function() {
        var startDate = $('#from_month').val();
        var endDate = $('#to_month').val();
        
        $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
            var transactionDate = data[0]; // Assuming transaction date is in the first column
            var start = new Date(startDate).getTime();
            var end = new Date(endDate).getTime();
            var current = new Date(transactionDate).getTime();

            if ((isNaN(start) && isNaN(end)) || (isNaN(start) && current <= end) || (start <= current && isNaN(end)) || (start <= current && current <= end)) {
                return true;
            }

            return false;
        });
        
        $('#datatable').DataTable().draw();
        $('#datatable').DataTable().ajax.reload(null, false);

        $.fn.dataTable.ext.search.pop();
    }).datepicker({
        format: 'mm-yyyy',
        minViewMode: 'months',
        autoclose: true,
        orientation: 'bottom'
    }).on('show', function() {
        $('.datepicker-days').hide();
    });

    table.on('xhr', function() {
        var responseData = table.ajax.json();
        var data = responseData.data;
        
        var target_sum = 0;
        var achived_sum = 0;
        var diffrance_sum = 0;
        var expense_sum = 0;

        for (var i = 0; i < data.length; i++) {
            target_sum += data[i].target_amt;
            achived_sum += data[i].achived_amt;
            diffrance_sum += parseFloat(data[i].differance_amt);
        }

        $("#total_target_amt").html(target_sum);

        $("#total_achived_amt").html(achived_sum);

        if(achived_sum > target_sum){
            $("#total_diffrance_amt").html("+" + diffrance_sum);
        }else{
            $("#total_diffrance_amt").html(diffrance_sum);
        }
    });

    var tColumns = ['transaction_date', 'transaction_num', 'month_target', 'target_type_column', 'department', 'factor', 'target_amt'];
    tColumns.forEach(function (columnName, index) {
        $('input[name="' + columnName + '"]').click(function (event) {
            event.stopPropagation();
        });

        $('input[name="' + columnName + '"]').on('keyup input', debounce(function () {
            // table.columns(index + 1).search(this.value).draw();
            table.columns(index + 1).search($('input[name="' + columnName + '"]').val()).draw();
            handleInputChange();
                    
            if($('input[name="' + columnName + '"]').val() != ''){
                $(".search-value").fadeIn();
            }else{
                $(".search-value").fadeOut();
            }
        }, 500));
    });

    const currentPage = window.location.pathname
  
    const startInputDates = $('#from_month');
    startInputDates.on('change', handleInputChange);

    const endInputDates = $('#to_month');
    endInputDates.on('change', handleInputChange);
      
    function handleInputChange() {
      const startInputDate = startInputDates.val();
      const endInputDate = endInputDates.val();

      const pageData = {
        start_month: startInputDate,
        end_month: endInputDate,
      };

      tColumns.forEach(function(columnName, index) {
        const inputValue = $('input[name="' + columnName + '"]').val();
        pageData[columnName] = inputValue;
      });

      const jsonPageData = JSON.stringify(pageData);
      localStorage.setItem(currentPage, jsonPageData);
    }
    
    const storedData = localStorage.getItem(currentPage);
    const parsedData = JSON.parse(storedData);

    if(parsedData != null){
      if(currentPage == "/admin/target-review"){
        if(parsedData.start_month != ''){
          $('#from_month').val(parsedData.start_month).datepicker("setDate", parsedData.start_month);
        }

        if(parsedData.end_month != ''){
          $('#to_month').val(parsedData.end_month).datepicker("setDate", parsedData.end_month);
        }

        tColumns.forEach(function(columnName, index) {
          if (parsedData && parsedData.hasOwnProperty(columnName)) {
              $('input[name="' + columnName + '"]').val(parsedData[columnName]); // Set the value of the input field
              table.columns(index + 1).search(parsedData[columnName]);
              handleInputChange();

              if(parsedData[columnName] != ''){
                $(".search-value").fadeIn();
              }
          }
        });
      }

      setTimeout(function() {
        $('#datatable').DataTable().draw();
      }, 300);
    }

    function clearFilterFields() {
        $("#from_month").val('');
        $("#to_month").val("{{date('m-Y')}}").attr('disabled',false);
        // $("#to_month").val(new Date().getMonth() + 1 + "-" + new Date().getFullYear());

        $(".search-value").fadeOut();
        localStorage.removeItem(currentPage);

        table.columns().search('').draw();

        for (var i = 0; i < tColumns.length; i++) {
            $('[name="' + tColumns[i] + '"]').val('');
        }

        $('#datatable').DataTable().ajax.reload(null, false);
    }

    function addTargetReview() {
        $("#modalAddTargetReview").modal('show');
        
        var inputs = document.querySelectorAll('input, select');

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].removeAttribute('disabled');
        }

        var today = new Date();
        var yyyy = today.getFullYear().toString().substr(-4);
        var mm = today.getMonth() + 1;
        var dd = today.getDate();

        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        
        var date=dd +'-'+mm+'-'+yyyy;
        $("#target_transaction_date").val(date);

        var currentDate = new Date();
        var day = currentDate.getDate();
        var month = currentDate.getMonth() + 1;
        var year = currentDate.getFullYear() % 100;
        var randomNum = Math.floor(Math.random() * (99909 - 10000 + 1)) + 10000;

        var formattedDate = ('0' + day).slice(-2) + ('0' + month).slice(-2) + ('0' + year).slice(-2);
        
        var generatedNumber = formattedDate + randomNum;
        $("#target_transaction_number").val(generatedNumber);

        $("#target_amount , #target_month , #add_target_id").val('');

        $("#target_department , #target_factor").empty().trigger("change");

        if($('#commission_income_target').prop('checked', true)){
            $('#bussiness_target').prop('checked', 'checked');
            $('#commission_income_target').prop('checked', false);
        }
        
        $("#modalAddTargetReviewLabel").html("Add Target");

        $("#savebtn").show().html("Save");

        $('#formAddTargetReview').removeClass('was-validated');
    }  

    function viewTargetReview(id){
        $.ajax({
            type: 'GET',
            url: targetReviewDetails + "?id=" + id,
            success: function(resultData) {
                if (resultData['msg']['status'] == 1) {
                    $('#target_department').empty();
                    var newOption = new Option(resultData['data']['department_name'],resultData['data']['target_department_id'], false,false);
                    $('#target_department').append(newOption).trigger('change');
                    
                    $('#target_factor').empty();
                    var newOption = new Option(resultData['data']['factor_name'],resultData['data']['target_factor_id'], false,false);
                    $('#target_factor').append(newOption).trigger('change');

                    $("#formAddtargetReview").trigger("reset");
                    $("#modalAddTargetReview").modal('show');
                    $("#modalAddTargetReviewLabel").html("View Target #"+id );
                    $("#savebtn").hide();
                    
                    $("#target_transaction_date").prop('disabled', true);
                    $("#target_transaction_number").prop('disabled', true);
                    $("#target_month").prop('disabled', true);
                    $("#target_department").prop('disabled', true);
                    $("#target_factor").prop('disabled', true);
                    $("#target_amount").prop('disabled', true);
                    $('#bussiness_target').prop('disabled',true);
                    $('#commission_income_target').prop('disabled',true);
                    
                    $("#target_transaction_date").val(resultData['data']['transaction_date']);
                    $("#target_transaction_number").val(resultData['data']['transaction_number']);
                    $("#target_month").val(resultData['data']['month']);                            
                    $("#target_amount").val(resultData['data']['target_amt']);
                    
                    if (resultData['data']['target_type'] == "Business Target") {
                        $('#bussiness_target').prop('checked', 'checked');
                        $('#commission_income_target').prop('checked', false);
                    } else if (resultData['data']['target_type'] == "Commission Income Target") {
                        $('#bussiness_target').prop('checked', false);
                        $('#commission_income_target').prop('checked', 'checked');
                    }
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

    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){
        $.ajax({
            type: 'GET',
            url: targetReviewDetails + "?id=" + id,
            success: function(resultData) {
                if (resultData['msg']['status'] == 1) {
                    $("#modalAddTargetReview").modal('show');
                    $("#modalAddTargetReviewLabel").html("Edit Target #"+id);
                    
                    $("#savebtn").show().html('Update');

                    $("#add_target_id").val(resultData['data']['id']);
                    $("#target_transaction_date").val(resultData['data']['transaction_date']);
                    $("#target_transaction_number").val(resultData['data']['transaction_number']);
                    $("#target_month").val(resultData['data']['month']);                            
                    $("#target_amount").val(resultData['data']['target_amt']);

                    var inputs = document.querySelectorAll('input, select');

                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].removeAttribute('disabled');
                    }
                    
                    $('#target_department').empty();
                    var newOption = new Option(resultData['data']['department_name'],resultData['data']['target_department_id'], false,false);
                    $('#target_department').append(newOption).trigger('change');
                    
                    $('#target_factor').empty();
                    var newOption = new Option(resultData['data']['factor_name'],resultData['data']['target_factor_id'] ,false,false);
                    $('#target_factor').append(newOption).trigger('change');
                    
                    if (resultData['data']['target_type'] == "Business Target") {
                        $('#bussiness_target').prop('checked', 'checked');
                        $('#commission_income_target').prop('checked', false);
                    } else if (resultData['data']['target_type'] == "Commission Income Target") {
                        $('#bussiness_target').prop('checked', false);
                        $('#commission_income_target').prop('checked', 'checked');
                    }
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

    function AddReason(id){
        setTimeout(function() {
            table1 = $('#datatable1').DataTable();
            table1.columns.adjust().draw();
        }, 200);

        $("#modalAddReason").modal('show');
        $("#formAddReason").trigger('reset').removeClass('was-validated');
        $("#modalAddReasonLabel").html("Add Reason #"+id );
        $("#reason_save").html('Save');

        var today = new Date();
        var yyyy = today.getFullYear().toString().substr(-4);
        var mm = today.getMonth() + 1;
        var dd = today.getDate();

        if (dd < 10) dd = '0' + dd;
        if (mm < 10) mm = '0' + mm;
        
        var date = dd +'-'+mm+'-'+yyyy;

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

        var Target_id = $("#target_id").val(id);
       
        $("#reason_id").val('');
        reasonDataTable(id);
    }

    function deleteTargetReviewReason(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) {
                removeReason(id);
            }
        });
    }

    function removeReason(id){
        $.ajax({
            type: 'GET',
            url: targetReviewReasonDelete + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);

                    $('#datatable , #datatable1').DataTable().ajax.reload(null, false);
                }  
            }
        });
    }
    
    function editTargetReviewReason(id){
        $.ajax({
            type: 'GET',
            url: targetReviewReasonDetails + "?id=" + id,
            success: function(resultData) {
                if (resultData['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_and_review_id']);
                    $("#reason_date").datepicker('destroy').val(resultData['data']['reason_date']);
                    $("#reason_date").datepicker({
                        update : resultData['data']['reason_date'],
                        format: "dd-mm-yyyy",
                        autoclose: true,
                        endDate: currentDate,
                        container: "#modalAddReason",
                    }).on('changeDate', function() {
                        $('.datepicker').hide();
                    });

                    $("#reason").val(resultData['data']['reason']);
                } else {
                    toastr["error"](resultData['msg']);
                }
            }
        });
    }

    function reasonDataTable(id){
        if (table1) {
            table1.clear().destroy();
        }

        table1= $('#datatable1').DataTable({
            "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1, 2]}],
            "order":[[ 1, 'desc' ]],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() { return $(window).height() - 490; },
            "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": ajaxURLGetTargetReason + "?id=" +  id,
                "type": "POST",
                "data": {"_token": csrfToken}
            },  
            "drawCallback": function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                });
            },
            "aoColumns" : [
                {"mData" : "action","bSortable": false},
                {"mData" : "reason_date"},
                {"mData" : "reason",
                 "render": function(data, type, full, meta) {
                    if (type === 'display' && data != null && data.length > 15) {
                        return '<span title="' + data + '">' + data.substr(0, 15) + '...</span>';
                    } else {
                        return data;
                    }
                 }    
                },
            ]
        });
    }
    
    $("#target_department").select2({
        ajax: {
            url: ajaxSearchTargetDepartment,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                  
                return {
                    search_value: params.term, // search term
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    },
                };
            },
            cache: false
        },
        placeholder: 'Search for target department',
        dropdownParent: $("#modalAddTargetReview .modal-body")
    }).on("change", function() {
        $("#target_factor").val("").trigger("change");
    });

    $("#target_factor").on("select2:open", function(e) {
        if (!$("#target_department option:selected").length) {
            toastr.error("Please select a department first.");
        }
    }).select2({
        ajax: {
            url: ajaxSearchTargetFactor,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                var targetType = $("input[name='target_type']:checked").val();
                return {
                    "department": function() {
                        return $("#target_department").val()
                    },
                    target_type: targetType, // selected radio button value
                    search_value: params.term, // search term
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    },
                };
            },
            cache: false
        },
        placeholder: 'Search for target factor',
        dropdownParent: $("#modalAddTargetReview .modal-body")
    });
</script>
@endsection