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

<style>
    .row{
        align-items: center;
    }
    .target-p {
        padding: 0.5rem !important;
    }
    ::-webkit-scrollbar {
                width: 20px;
    }
    #datatable1 tbody tr td:nth-child(3) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 250px;
        /* font-size: medium; */
    }
    .scrollable-menu {
        height: auto;
        max-height: 400px;
        overflow-x: hidden;
    }

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

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

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

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }
</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>
        <!-- end page title -->
        
        <div class="table-responsive">
            <table id="datatable" class="table align-middle table-nowrap table-striped display nowrap w-100 scrollable-element plan ">
                <thead class="table-light">
                    <tr>
                        <input type="hidden" name="id" id="target_id" value="{{  $data['targetWeeklyId'] }}">
                        <th>Tr.Date </th>
                        <th>Sr.No</th>
                        <th>Target Start Date <br><input type="text" class="form-control" id="target_start_date" placeholder="Search" style="width: 100px; height: 25px"></th>
                        <th>Target End Date <br> <input type="text" class="form-control" id="target_end_date" placeholder="Search" style="width: 100px; height: 25px"></th>
                        <th>Target Type<br><input type="text" class="form-control" id="target_type" placeholder="Search" style="width: 100px; height: 25px"></th>
                        <th>Target Set</th>
                        <th>Achieved</th>
                        <th>Difference</th>
                        <th>Add Reason</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            @csrf
        </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.target.review.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*</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*</label>
                                        <input type="text" class="form-control" name="reason" id="reason" value="" placeholder="Enter Reason" required maxlength="100" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="mb-3">
                                        <label for="reason_save" class="form-label">&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 -->
    </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 ajaxURLGetTargetReason = "{{route('target.reason.ajax')}}";
    var ajaxURLGetTarget = '{{route("target.ajax")}}';
    var targetReviewReasonDelete = "{{route('delete.target.reason')}}";
    var targetReviewReasonEdit = "{{route('edit.target.reason')}}";
    var targetReviewDelete = "{{route('delete.target')}}";
    var ajaxSearchTargetType = "{{route('search.target.type')}}";
    var csrfToken = $("[name=_token]").val();
    var target_id = $("#target_id").val();
    var currentDate = new Date();
    var table, table1;

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

    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": ajaxURLGetTarget + "?id=" + target_id,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "tr_date"},
            {"mData": "id"},
            {"mData": "target_start_date"},
            {"mData": "target_end_date"},
            {"mData": "target_type"},
            {"mData": "target_set"},
            {"mData": "achieved"},
            {"mData": "difference"},
            {"mData": "add_reason"},
        ]
    });

    $('#target_type').click(function() {
        event.stopPropagation();
    });
    $('#target_type').on('keyup', function() {
        table.columns(0).search(this.value).draw();
    });

    $('#target_type').click(function() {
        event.stopPropagation();
    });
    $('#target_type').on('keyup', function() {
        table.columns(1).search(this.value).draw();
    });

    $('#target_start_date').click(function() {
        event.stopPropagation();
    });
    $('#target_start_date').on('keyup', function() {
        table.columns(2).search(this.value).draw();
    });

    $('#target_end_date').click(function() {
        event.stopPropagation();
    });
    $('#target_end_date').on('keyup', function() {
        table.columns(3).search(this.value).draw();
    });

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };
        $('#formAddReason').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']);

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

            resetInputForm();
            if (responseText['data']['key'] == 'Reason') {
                AddReason(responseText['data']['id']);
                $('#datatable1').DataTable().ajax.reload(null, false);
            }
        } else if (responseText['data']['status'] == 0) {

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

    function resetInputForm() {
        $('#modalAddReason').trigger("reset").removeClass('was-validated');
        $('#reason_date').val("");
    }

    //add reason
    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").val(date);

        var Target_id = $("#target_id").val(id);

        $("#reason_id").val('');
        reasonDataTable(id);
    }

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

        table1 = $('#datatable1').DataTable({
            "aoColumnDefs": [{"bSortable": true,"aTargets": [0, 1]}],
            "order": [[1, 'desc']],
            "ordering": true,
            "processing": true,
            "serverSide": true,
            "scrollX": true,
            "scrollY": function() {return $(window).height() - 490},
            "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}
            },
            "aoColumns": [
                {"mData": "action","bSortable": false},
                {"mData": "reason_date"},
                {"mData": "reason","bSortable": false},
            ]
        });
    }

    // delete reason
    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);
                }
            }
        });
    }

    // 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']);
                }
            }
        });
    }
</script>
@endsection