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

    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href=" {{ asset('assets/css/dataTables.bootstrap5.css') }}">

    <style type="text/css">
        td p {
            max-width: 100%;
            white-space: break-spaces;
            word-break: break-all;
        }


        .page-title-right {
            text-align: left;
            margin-top: 20px;
        }

        .modal-lg {
            max-width: 1100px;
        }

        .target-box {
            margin-left: 15px;
        }

        h5#canvasTargetMasterLable {
            font-size: 1.4rem;
        }

        div.dataTables_wrapper div.dataTables_filter {
            text-align: right !important;
        }

        table.dataTable a {
            color: #3751A1;
        }

        #card_targetview .col-md-3 {
            margin-top: 10px;
        }

        @media (max-width:767px) {
            #card_targetview .col-md-3 {
                width: 50%;
            }

            .page-title-right {
                text-align: right;
                margin-top: 0;
                margin-bottom: 10px;
            }

        }

        @media (max-width:639px) {
            #datatable_wrapper .col-sm-12.col-md-6 {
                padding-left: 0;
                width: 50%;
            }
        }

        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 60px calc(24px / 2) !important;
        }

        .table-responsive {
            overflow-x: hidden;
        }

        /* #datatable thead th:first-child {
                    border-top-left-radius: 10px;
                    border-bottom-left-radius: 10px;
                }

                #datatable thead th:last-child {
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                } */
        #datatable thead th {
            border-top: 2px solid #d6deec;
            border-bottom: 2px solid #d6deec !important;
        }

        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: center;
            padding: 5px;
            font-weight: 600;
            /* font-family: 'Almarose Semibold', sans-serif; */
            font-family: 'Montserrat', sans-serif !important;
            /* background-color: rgb(225 232 242) !important; */
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: center;
            background-color: #fff !important;
            color: #000;
            vertical-align: middle;
            padding: 5px;
            /* border-top: 1px solid #e5e9f2; */
        }

        /* #datatable_filter input {
                        width: 500px;
                        height: 36px;
                        font-size: 12px;
                    } */

        .card {
            border: none !important;
        }

        table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
            box-shadow: none !important;
        }

        .card-body {
            padding: 1.25rem 1.25rem !important;
        }

        div.dt-container div.dt-length label {
            font-size: 14px;
        }

        .dt-length,
        div.dt-container div.dt-paging {
            margin-top: 10px;
        }

        div.dt-container div.dt-paging ul.pagination {
            justify-content: flex-end;
        }

        div.dataTables_wrapper div.dataTables_length label {
            font-size: 14px;
        }

        div#datatable_info {
            display: none;
        }

        div#datatable_processing {
            display: none !important;
        }

        .form-select.form-select-sm {
            padding-right: 25px !important;
            width: auto;
            display: inline-block;
            margin-right: 0.5em;
        }

        .dt-length label {
            font-size: 14px;
        }

        input.form-control {
            font-size: 12px;
        }

        button#addBtnMainMaster {
            font-size: .8125rem;
        }

        .custom-modal-close img {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        button.custom-modal-close {
            padding: 0;
            background: transparent;
            border: none;
            margin-left: 5px;
        }

        .left-icon .custom-modal-close img {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .left-icon img {
            width: 21px;
            height: 21px;
            cursor: pointer;
        }

        .info-icon-wrapper:hover #shortcut_keys {
            display: inline !important;
            font-size: 10px;
        }

        table.dataTable thead>tr>th.dt-orderable-asc:hover,
        table.dataTable thead>tr>th.dt-orderable-desc:hover,
        table.dataTable thead>tr>td.dt-orderable-asc:hover,
        table.dataTable thead>tr>td.dt-orderable-desc:hover {
            outline: none !important;
        }
    </style>
    <div class="page-content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body" id="card_targetview">
                            <div class="table-responsive table-card">
                                <div class="row">
                                    <div class="col-lg-6 col-md-12 mb-3">
                                        <div
                                            class="page-title-right d-flex justify-content-lg-start justify-content-center">
                                            <button onclick="targetView(0,0,0,'new')" id="viewTargetBtn"
                                                class="btn btn-primary me-2 text-nowrap" type="button"><i
                                                    class="bx bx-list-ul font-size-16 align-middle me-2"></i>Target
                                                View <small>(Alt + V)</small> </button>
                                            @if (canCreate('Target Achievement'))
                                                <button onclick="addtarget()"
                                                    class="btn btn-primary add_new_btn text-nowrap" type="button"><i
                                                        class="bx bx-plus font-size-16 align-middle me-2"></i>Add
                                                    Target <small>(Alt + N)</small> </button>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 mb-3">
                                        <div class="ajax-select">
                                            <label for="q_financial_year_filter" class="form-label">Financial Year </label>
                                            <select class="form-control select2-ajax" id="q_financial_year_filter"
                                                name="q_financial_year_filter">
                                            </select>
                                            <div class="invalid-feedback">
                                                Please select view type.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-6 mb-3">
                                        <div class="ajax-select">
                                            <label for="q_target_view_type" class="form-label"> Month </label>
                                            <select class="form-control select2-ajax" id="q_target_view_type"
                                                name="q_target_view_type">
                                            </select>
                                            <div class="invalid-feedback">
                                                Please select view type.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if (canView('Target Achievement'))
                                    <div class="table-responsive">
                                        <table id="datatable" class="table table-striped dataTable no-footer dtr-inline">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>id</th>
                                                    <th>Name</th>
                                                    <th class="ps-0">Total Target</th>
                                                    <th>Achieved Target</th>
                                                    <th>% Achieved</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                        <div id="datatable-controls"
                                            class="d-flex justify-content-between align-items-center">
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
    @csrf
@endsection('content')

@section('custom-scripts')
    @include('../target/comman/add_edit')

    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/js/dataTables.buttons.min.js') }}"></script>

    <script type="text/javascript">
        var ajaxTargetAchievementDataUrl = '{{ route('target-achievement.ajax') }}';
        var ajaxTargetAchievementDetailURL = '{{ route('target.achievement.detail') }}';
        var ajaxSearchTargetViewTypeURL = '{{ route('search.target.view.type') }}';
        var ajaxCurruntFinancialYearURL = '{{ route('currunt.financial.year.ajax') }}';

        var csrfToken = $("[name=_token").val();

        var mainMasterPageLength = getCookie('mainMasterPageLength') !== undefined ? getCookie('mainMasterPageLength') : 10;
        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": [5]
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "pagingType": "full_numbers",
            "pageLength": mainMasterPageLength,
            dom: 'lrtip',
            "ajax": {
                "url": ajaxTargetAchievementDataUrl,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                    "view_type": function() {
                        return $("#q_target_view_type").val()
                    },
                    "financial_year": function() {
                        return $("#q_financial_year_filter").val()
                    },
                }
            },
            "aoColumns": [{
                    "mData": "id"
                },
                {
                    "mData": "name"
                },
                {
                    "mData": "total_target"
                },
                {
                    "mData": "achived_target"
                },
                {
                    "mData": "achived_per"
                },
                {
                    "mData": "action"
                }
            ],
            "drawCallback": function() {
                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl)
                });
            }
        });
        let customSearch = $(
            '<input type="search" class="form-control form-control-sm" placeholder="Search Target" aria-controls="datatable" style="padding-left: 40px !important; max-width: 528px; margin-left: 0;border: 1px solid #fff!important; border-radius: 10px; height: 41px; box-shadow: none;">'
        );

        $('#datatable-search-container').append(customSearch);

        // Trigger DataTable search on keyup
        customSearch.on('keyup', function() {
            table.search(this.value).draw();
        });
        $('#datatable-search-container input[type="search"]').on('input', function() {
            if ($(this).val().trim() === '') {
                let table = $('#datatable').DataTable();
                table.search('').draw(); // Refresh table
            }
        });

        $('.dt-length').appendTo('#datatable .row');
        $('.dt-length').css({
            'margin-top': '10px',

        });

        $('.dt-length').appendTo('#datatable-controls');
        $('.dt-paging').appendTo('#datatable-controls');


        $('.dt-paging').appendTo('#datatable .row');
        $('.dt-paging').css({
            'text-align': 'center',
            'margin-top': '10px'
        });

        $('#datatable_filter').appendTo('#datatable-search-container');
        $('#datatable-search-container .dataTables_filter').addClass('d-flex align-items-center');


        $('#datatable-search-container input').attr('style', function(i, style) {
            return (style || '') +
                'padding-left: 40px !important; max-width: 528px; margin-left: 0;border: 1px solid #fff!important; border-radius: 10px; height: 41px; box-shadow: none;';
        });

        $('#datatable-search-container input').wrap('<div class="search-wrapper"></div>');

        $('.search-wrapper').css({
            'position': 'relative',
            'width': '100%',
            'display': 'flex',
            'align-items': 'center',
        });

        $('.search-wrapper').append('<i class="fas fa-search search-icon"></i>');

        $('.search-icon').css({
            'position': 'absolute',
            'left': '10px',
            'top': '41%',
            'transform': 'translateY(-50%)',
            'font-size': '16px',
            'color': '#aaa',
        });



        $('#datatable').on('lenght.dt', function(e, settings, len) {
            setCookie('usersPageLength', len, 100);
        });

        function reloadTable() {
            table.ajax.reload(null, false);
        }


        $('#datatable').on('length.dt', function(e, settings, len) {
            setCookie('mainMasterPageLength', len, 100);

        });

        $('#q_financial_year_filter').on('select2:open', function() {
            $(this).next('.select2').addClass('focused');
        });
        $('#q_target_view_type').on('select2:open', function() {
            $(this).next('.select2').addClass('focused');
        });

        $(document).ready(function() {
            $.ajax({
                type: 'GET',
                url: ajaxCurruntFinancialYearURL,
                success: function(resultData) {
                    if (resultData.currunt_fy_name != 0) {
                        var newOption = new Option(resultData.currunt_fy_name, resultData.currunt_fy_id,
                            false, false);
                        $('#q_financial_year_filter').append(newOption).trigger('change');
                    }
                }
            });
            // var newOption = new Option('FULL YEAR', '0', false, false);

            // const month = ["non", "JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST",
            //     "SEPTEMBER", "OCTOMBER", "NOVEMBER", "DECEMBER"
            // ];
            const month = ["non", "january", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST",
                "SEPTEMBER", "OCTOMBER", "NOVEMBER", "DECEMBER"
            ];
            const d = new Date();
            let month_no = (d.getMonth() + 1);
            let month_name = month[month_no];

            var newOption = new Option(month_name, month_no, false, false);
            $('#q_target_view_type').append(newOption).trigger('change');

            var options = {
                beforeSubmit: showRequest, // pre-submit callback
                success: showResponse // post-submit callback
            };
            // bind form using 'ajaxForm'
            $('#formTargetMaster').ajaxForm(options);

        });

        $('#q_target_view_type').on('change', function() {
            reloadTable();
        });

        function showRequest(formData, jqForm, options) {
            var queryString = $.param(formData);
            $("button[type='submit']").prop('disabled', true);
            $('#target_reset').prop('disabled', true);
            $(".save_target").html(
                '<i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> <span  >Saving...</span>');
            return true;
        }

        function showResponse(responseText, statusText, xhr, $form) {
            if (responseText['status'] == 1) {
                toastr["success"](responseText['msg']);
                $("#modalAddEditTarget").modal('hide');
                reloadTable();
                $(".save_target").html("Save <small>(Alt + S)</small>");
                $("button[type='submit']").prop('disabled', false);
                $('#target_reset').prop('disabled', false);

            } else if (responseText['status'] == 0) {

                if (typeof responseText['data'] !== "undefined") {
                    var size = Object.keys(responseText['data']).length;
                    if (size > 0) {
                        for (var [key, value] of Object.entries(responseText['data'])) {
                            toastr["error"](value);
                        }
                    }
                } else {
                    toastr["error"](responseText['msg']);
                }
                reloadTable();
                $(".save_target").html("Save <small>(Alt + S)</small>");
                $("button[type='submit']").prop('disabled', false);
                $('#target_reset').prop('disabled', false);


            }
        }

        var ajaxURLSearchFY = '{{ route('search.financial.year.ajax') }}';
        $("#q_financial_year_filter").select2({
            allowClear: true,
            ajax: {
                url: ajaxURLSearchFY,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {

                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;
                    if (data.currunt_fy_name != 0) {
                        var newOption = new Option(data.currunt_fy_name, data.currunt_fy_id, false, false);
                        $('#q_financial_year_filter').append(newOption).trigger('change');
                    }
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }

                    };

                },
                cache: false
            },
            placeholder: 'Select FY',
            dropdownParent: $("#card_targetview"),
        }).on('change', function(e) {
            reloadTable();
        });

        $("#q_target_view_type").select2({
            allowClear: true,
            ajax: {
                url: ajaxSearchTargetViewTypeURL,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        q: 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: 'Select Item View Type',
            dropdownParent: $("#card_targetview"),
        });

        $("#addBtnMainMaster").click(function() {
            $("#canvasTargetMasterLable").html("Add Target");
            $("#formTargetMaster").show();
            $(".loadingcls").hide();
            $(".save_target").html("Save <small>(Alt + S)</small> ");
            resetInputForm();
        });
        $(".save_target").click(function() {
            $('#formTargetMaster').addClass('was-validated');
        });

        function resetInputForm() {
            $("#formTargetMaster").removeClass('was-validated');
            $('#formTargetMaster').trigger("reset");
            $("#q_target_achievement_id").val(0);
            $("#q_employee_id").empty().trigger('change');
            $("#q_fy_id").empty().trigger('change');

            $("#q_target_achievement_id").val(0);

            $('#q_joining_date').val('');
            $("#april_td_id").val(0);
            $("#may_td_id").val(0);
            $("#june_td_id").val(0);
            $("#july_td_id").val(0);
            $("#august_td_id").val(0);
            $("#september_td_id").val(0);
            $("#octomber_td_id").val(0);
            $("#november_td_id").val(0);
            $("#december_td_id").val(0);
            $("#january_td_id").val(0);
            $("#february_td_id").val(0);
            $("#march_td_id").val(0);

            $(".save_target").html("Save <small>(Alt + S)</small> ");
        }

        function editView(id) {

            resetInputForm();

            $("#modalAddEditTarget").modal('show');
            $("#canvasTargetMasterLable").html("Edit Target");
            $("#formTargetMaster").hide();
            $(".loadingcls").show();

            $("#q_incremental_per").on("keyup change", function(e) {
                var max = parseInt($(this).attr('max'));
                var min = parseInt($(this).attr('min'));
                if ($(this).val() > max) {
                    $(this).val(max);
                } else if ($(this).val() < min) {
                    $(this).val(min);
                }

                var Monthly_Target_Input_array = document.getElementsByClassName('monthly_dist');
                var Incremental_Per = document.getElementById('q_incremental_per');
                var Distribute_Type = $("#distribute_type_value").val();
                var Total_target = $("#q_total_target").val();
                var Total_Month = 12;
                var Joining_Date = $('#q_joining_date').val();
                var FY_Id = $('#q_fy_id').val();
                var Fy_Text = $('#q_fy_id').select2('data')[0].text;

                distribute_target(Monthly_Target_Input_array, Incremental_Per, Distribute_Type, Total_target,
                    Total_Month, Joining_Date, FY_Id, Fy_Text);

            });

            $("#q_total_target").on("keyup change", function(e) {
                var Monthly_Target_Input_array = document.getElementsByClassName('monthly_dist');
                var Incremental_Per = document.getElementById('q_incremental_per');
                var Distribute_Type = $("#distribute_type_value").val();
                var Total_target = this.value;
                var Total_Month = 12;
                var Joining_Date = $('#q_joining_date').val();
                var FY_Id = $('#q_fy_id').val();
                var Fy_Text = $('#q_fy_id').select2('data')[0].text;

                distribute_target(Monthly_Target_Input_array, Incremental_Per, Distribute_Type, Total_target,
                    Total_Month, Joining_Date, FY_Id, Fy_Text);
            })


            $('input[type=radio][name=distribute_type]').change(function() {

                $("#distribute_type_value").val(this.value);

                var Monthly_Target_Input_array = document.getElementsByClassName('monthly_dist');
                var Incremental_Per = document.getElementById('q_incremental_per');
                var Distribute_Type = $("#distribute_type_value").val();
                var Total_target = $("#q_total_target").val();
                var Total_Month = 12;
                var Joining_Date = $('#q_joining_date').val();
                var FY_Id = $('#q_fy_id').val();
                var Fy_Text = $('#q_fy_id').select2('data')[0].text;

                distribute_target(Monthly_Target_Input_array, Incremental_Per, Distribute_Type, Total_target,
                    Total_Month, Joining_Date, FY_Id, Fy_Text);
            });

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

                        $("#q_target_achievement_id").val(resultData['data']['basic']['id']);
                        $("#q_joining_date").val(resultData['data']['basic']['joining_date']);

                        if (resultData['data']['basic']['employeee_id'] !== null) {
                            $("#q_employee_id").empty().trigger('change');
                            var newOption = new Option(resultData['data']['basic']['sales_person_name'],
                                resultData['data']['basic']['employeee_id'], false, false);
                            $('#q_employee_id').append(newOption).trigger('change');
                        }
                        if (resultData['data']['basic']['finyear_id'] !== null) {
                            $("#q_fy_id").empty().trigger('change');
                            var newOption = new Option(resultData['data']['basic']['financial_year'],
                                resultData['data']['basic']['finyear_id'], false, false);
                            $('#q_fy_id').append(newOption).trigger('change');
                        }

                        $("#q_min_achievement").val(resultData['data']['basic']['minachivement']);
                        $("#q_total_target").val(resultData['data']['basic']['total_target']);
                        $("#distribute_type_value").val(+resultData['data']['basic']['distribute_type']);


                        $('input:radio[name="distribute_type"]').filter('[value="' + resultData['data']['basic']
                            ['distribute_type'] + '"]').attr('checked', true);
                        if (resultData['data']['basic']['distribute_type'] == 3) {
                            document.getElementById('q_incremental_per').removeAttribute("readonly");
                            document.getElementById('q_incremental_per').required = true;
                            $("#q_incremental_per").val(resultData['data']['basic']['incremental_per']);
                        }

                        $.each(resultData['data']['detail'], function(index, value) {

                            if (value['month_number'] == 4) {
                                $("#april_td_id").val(value['id']);
                                $("#q_april_target").val(value['target_amount']);

                            } else if (value['month_number'] == 5) {
                                $("#may_td_id").val(value['id']);
                                $("#q_may_target").val(value['target_amount']);

                            } else if (value['month_number'] == 6) {
                                $("#june_td_id").val(value['id']);
                                $("#q_june_target").val(value['target_amount']);

                            } else if (value['month_number'] == 7) {
                                $("#july_td_id").val(value['id']);
                                $("#q_july_target").val(value['target_amount']);

                            } else if (value['month_number'] == 8) {
                                $("#august_td_id").val(value['id']);
                                $("#q_august_target").val(value['target_amount']);

                            } else if (value['month_number'] == 9) {
                                $("#september_td_id").val(value['id']);
                                $("#q_september_target").val(value['target_amount']);

                            } else if (value['month_number'] == 10) {
                                $("#octomber_td_id").val(value['id']);
                                $("#q_october_target").val(value['target_amount']);

                            } else if (value['month_number'] == 11) {
                                $("#november_td_id").val(value['id']);
                                $("#q_november_target").val(value['target_amount']);

                            } else if (value['month_number'] == 12) {
                                $("#december_td_id").val(value['id']);
                                $("#q_december_target").val(value['target_amount']);

                            } else if (value['month_number'] == 1) {
                                $("#january_td_id").val(value['id']);
                                $("#q_january_target").val(value['target_amount']);

                            } else if (value['month_number'] == 2) {
                                $("#february_td_id").val(value['id']);
                                $("#q_february_target").val(value['target_amount']);

                            } else if (value['month_number'] == 3) {
                                $("#march_td_id").val(value['id']);
                                $("#q_march_target").val(value['target_amount']);

                            }

                        });

                        $(".loadingcls").hide();
                        $("#formTargetMaster").show();


                    } else {

                        toastr["error"](resultData['msg']);

                    }

                }
            });

        }


        $(document).keydown(function(event) {
            if (event.altKey && event.key.toLowerCase() === "v") {
                event.preventDefault();
                $("#viewTargetBtn")[0].click();
            }
        });
    </script>
@endsection