@extends('admin.layouts.main')

@section('title')
Employee - Payroll
@endsection

@section('content')
<main>

    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @if(Session::get('panel') == 'payroll-admin')
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employees') }}</li>
                    @else
                        <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('company.directory') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">
                            <a href="{{ route('admin.companies.indexpageload', ['panel' => Session::get('panel')]) }}">{{ @trans('company.company') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('candidate.detail') }}</a> </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('payroll.employee') }}</li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">

                @include('payroll::employee_payroll.modules.store.common.form-step')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-8 offset-lg-1">
                            <div class="step-box">

                                <div>
                                    <div class="btn-group-em float-right" role="group">
                                        <a href="javascript:void(0)" class="btn btn-sm step-btn-transparent d-flex align-items-center" onclick="personalDocument()" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-company-id="" data-doc-type-id="personal-document">Attach</a>
                                    </div>
                                    <h2 class="form-sec-title">{{ @trans('payroll.personal_documents') }}</h2>
                                    <div class="row mb-30">
                                        <div class="col-md-12">
                                            <div class="table-data">
                                                <div class="table-responsive table-checkable">
                                                    <div class="no-record-client-contact text-center"></div>
                                                    <table class="table table-borderless table-sm table-layout-fixed">
                                                        <thead id="employe-personal-document-table">
                                                            <tr>
                                                                <th class="border-0 shadow-none w-50">
                                                                    <label class="control-label normal gray m-0">{{ @trans('payroll.document_type') }}</label>
                                                                </th>
                                                                <th class="border-0 shadow-none w-50">
                                                                    <label class="control-label normal gray m-0">{{ @trans('payroll.action') }}</label>
                                                                </th>
                                                            </tr>

                                                        </thead>
                                                        <tbody id="employe-personal-document"></tbody>
                                                    </table>
                                                </div>
                                                <div>

                                                    <div class="btn-group-em float-right" role="group">
                                                        <a href="javascript:void(0)" class="btn btn-sm step-btn-transparent d-flex align-items-center" onclick="companyDocument()" href="#attachModal" data-toggle="modal" data-target="#attachModal" data-company-id="">Attach</a>
                                                    </div>
                                                    <h2 class="form-sec-title">{{ @trans('payroll.company_documents') }}</h2>
                                                    <div class="row mb-30">
                                                        <div class="col-md-12">
                                                            <div class="table-data">
                                                                <div class="table-responsive table-checkable">
                                                                    <div class="no-record-client-contact text-center"></div>
                                                                    <table class="table table-borderless table-sm table-layout-fixed">
                                                                        <thead id="employe-company-document-table">
                                                                            <tr>
                                                                                <th class="border-0 shadow-none w-50">
                                                                                    <label class="control-label normal gray m-0">{{ @trans('payroll.document_type') }}</label>
                                                                                </th>
                                                                                <th class="border-0 shadow-none w-50">
                                                                                    <label class="control-label normal gray m-0">{{ @trans('payroll.action') }}</label>
                                                                                </th>
                                                                            </tr>

                                                                        </thead>
                                                                        <tbody id="employe-company-document"></tbody>
                                                                    </table>
                                                                </div>

                                                                <div class=" tab-btn">
                                                                    @if (isset($edit) && $edit == true)
                                                                    <div style="float: left;">
                                                                        <a class="btn btn-cncl" href="{{ route('admin.payroll.tabs',['panel' => Session::get('panel'), 'id' => $id,'user_id' => $user_id, 'type' => 'document']) }}">{{ @trans('project::project.cancel') }}</a>
                                                                    </div>
                                                                    <div style="float:right;">
                                                                        <a class="btn btn-cncl" href="{{ route('admin.companies.detail',['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.finish') }}</a>
                                                                    </div>
                                                                    @else
                                                                        @if(Session::get('panel') == 'payroll-admin')
                                                                            <div style="float: left;">
                                                                                <a class="btn btn-cncl" href="{{ route('admin.payroll.admin.employee.remuneration',['panel' => Session::get('panel'), 'id' => $id, 'user_id' => $user_id]) }}">{{ @trans('project::project.prev') }}</a>
                                                                            </div>
                                                                        @else
                                                                            <div style="float: left;">
                                                                                <a class="btn btn-cncl" href="{{ route('admin.payroll.employee.remuneration',['panel' => Session::get('panel'), 'id' => $id, 'user_id' => $user_id]) }}">{{ @trans('project::project.prev') }}</a>
                                                                            </div>
                                                                        @endif
                                                                        <div style="float:right;">
                                                                            <form id="employeePayrollStatus" name="employeePayrollStatus" method="post" method="post" action="{{ route('admin.payroll.documentStore',['panel' => Session::get('panel')]) }}">
                                                                                @csrf
                                                                                <input type="hidden" name="company_id" id="company_id" value="{{ $id }}" />
                                                                                <input type="hidden" name="users_id" id="users_id" value="{{ $user_id }}" />

                                                                                <button type="submit" id="employeeBtnStatus" class="btn step-btn employeeBtnStatus">{{ @trans('payroll.finish') }}</button>
                                                                            </form>
                                                                        </div>
                                                                    @endif
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@push('pageModals')
<div class="modal fade" id="attachModal" style="z-index: 9999;" data-backdrop="static">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">

            <form id="frmAttach" method="post" enctype="multipart/form-data" action="">

                <input type="hidden" name="companyId" id="companyId" value="{{ $id }}" />
                <input type="hidden" name="type" id="type" value="" />
                <input type="hidden" name="user_id" id="user_id" value="{{ $user_id }}" />
                @csrf

                <!-- Modal Header -->
                <div class="modal-header new-light-bg border-0">
                    <h4 class="modal-title regular body-font-size">Attach</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p class="mb-1 small-font-size title1" id="title1"></p>
                    <p class="gray xs-font-size title2" id="title2">You can upload upload multiple files at a time.</p>
                    <div class="set attach-list-row">

                        <div class="col-md-12">
                            <div class="form-group mb-1 documentFileNameClass">
                                <label class="control-label">{{ @trans('payroll.upload_file') }}</label>
                                <div class="custom-file w-100 file-type-new file-upload">
                                    <input type="file" class="custom-file-input w-100 fileInput" id="documentFile" name="documentFile" accept=".doc,.docx,.odt,.pdf,.jpeg,.jpg,.png">
                                    <label class="custom-file-label bg-white form-control text-left d-flex">Choose
                                        file...</label>
                                    <span class="attachment-bg"><img src="{{ asset('img/admin/ic-attachment-dark.svg') }}" alt="ic-attachment" /></span>
                                </div>
                                <span class="m-0 xs-font-size showDocumentFileName"></span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group mb-0 mr-2">
                                <label class="control-label">{{ @trans('payroll.document_name') }}</label>
                                <input type="text" class="form-control titleInput" placeholder="Type here..." name="title" />
                            </div>
                        </div>
                        <hr />
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="custom-control custom-checkbox d-flex align-items-center">
                                <input type="checkbox" class="custom-control-input" id="set_reminder" name="set_reminder" value="1">
                                <label class="custom-control-label" for="set_reminder">{{ @trans('payroll.set_reminder') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="row enable-reminder hidden">
                        <div class="col-md-6">
                            <div class="form-group date">
                                <label class="control-label">{{ @trans('payroll.reminder_date') }}
                                </label>
                                <div class="input-group date">
                                    <input type="text" class="form-control reminder_document_date bg-white dateselect" placeholder="{{ @trans('payroll.reminder_date') }}" id="reminder_document_date" name="reminder_document_date">
                                    <div class="input-group-addon">
                                        <span class="material-icons">date_range</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('payroll.email') }}
                                </label>
                                <input type="text" id="email" name="email" class="form-control" placeholder="{{ @trans('payroll.email') }}">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="control-label">{{ @trans('payroll.notes') }}
                                </label>
                                <input type="text" id="notes" name="notes" class="form-control" placeholder="{{ @trans('payroll.notes') }}">
                            </div>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer justify-content-center border-top-0 pt-0 pb-4">
                        <input type="submit" class="btn btn-em submitfrmAttach" value="Submit" />
                    </div>
            </form>
        </div>
    </div>
</div>
@endpush

@push('pageJs')
{!! JsValidator::formRequest('Modules\Payroll\Http\Requests\StoreEmployeeRemunerationRequest', '#employeeRemunerationDetails') !!}

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/vendor/jquery.alphanum.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $(".numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 2,
            allowThouSep: false,
            min: 1,
            max: 30
        })
        $(".age-numeric-val").numeric({
            allowMinus: false,
            allowDecSep: false,
            maxDecimalPlaces: 3,
            allowThouSep: false,
            min: 1,
            max: 100
        })
        $('#project_importance').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 10
        });
        $('#actualization').numeric({
            allowMinus: false,
            allowDecSep: false,
            allowThouSep: false,
            min: 0,
            max: 100
        });
        // $(function() {
        //     $("body").delegate("#reminder_document_date", "focusin", function() {
        //         $(this).datepicker();
        //     });
        // });

        var today = new Date();

        var $date = $('#reminder_document_date').datepicker({
            autoHide: true,
            format: 'dd-mm-yyyy',
            zIndex: 2048,
            startDate: null,
            defaultViewDate: new Date(),
        });
        $('#reminder_document_date').change(function() {
            $(this).valid();
        })



        $('#attachModal').on('show.bs.modal', function(e) {
            // if ($(e.relatedTarget).attr('data-doc-type-id') == 'recruitment-agreement') {
            var type = $('#type').val();
            console.log(type);
            if (type == 'personal-document') {
                $('#title1').text('Upload your personal document');
            } else if (type == 'company-document') {
                $('#frmAttach .title1').text('Upload your Company document');
            }
            $('#frmAttach .title2').text('Valid files are PDF, Word, Images (png/jpg)');

            $('#frmAttach .adder').remove();
            // }
        });
        getDocumentList()
        $('#attachModal').on('hidden.bs.modal', function(e) {
            $('#frmAttach').trigger('reset');
            $('#frmAttach').find('.invalid-feedback').remove();
            $('.showDocumentFileName').empty();
            $('#frmAttach').find('.custom-file-input').removeClass('is-invalid');
            $('#frmAttach').find('.form-control').removeClass('is-invalid');
            $('.enable-reminder').addClass('hidden');
        });

        $(document).on('change', '#frmAttach input[type="file"]', function(e) {
            $(this).parents('.documentFileNameClass').find('.showDocumentFileName').text(e.target.files[
                0].name);
        });

        $("#frmAttach").validate({
            rules: {
                documentFile: {
                    required: true,
                    extension: "doc|docx|odt|pdf|jpeg|jpg|png",
                    // filesize: 5120 // 5120 KB = 5 MB
                },
                title: 'required',
                reminder_document_date: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    }
                },
                email: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    },
                },
                notes: {
                    required: function(element) {
                        return $('#set_reminder').prop('checked');
                    }
                }
            },
            messages: {

                documentFile: {
                    required: "Document field is required.",
                    extension: "Please upload a file of type: doc, docx, odt, pdf, jpeg, jpg, png.",
                    filesize: "The file size must be less than or equal to 5 MB."
                },
                title: "Document name field is required.",
                reminder_document_date: "Reminder Document Date field is required.",
                email: "Email field is required.",
                notes: "Notes field is required."
            }
        });

        $(document).on('submit', '#frmAttach', function(e) {
            e.preventDefault();
            if ($('#frmAttach').valid()) {
                var formData = new FormData(this);
                var docId = $('#frmAttach #docTypeId').val()
                var companyId = $('#frmAttach #companyId').val()

                $('#frmAttach .submitfrmAttach').attr('disabled', true);
                $('#frmAttach .submitfrmAttach').val('Uploading...');

                $.ajax({
                    type: 'POST',
                    url: "{{ route('admin.payroll.storeDocuments', ['panel'=> session('panel')]) }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        //showLoader();
                    },
                    success: function(response) {
                        $('.showDocumentFileName').empty();
                        var res = response;
                        if (response.code == 200) {
                            $("#frmAttach").trigger('reset');
                            $('#attachModal').modal('hide');

                        }

                        Snackbar.show({
                            pos: 'bottom-right',
                            text: response.message,
                            actionText: 'Okay'
                        });
                        $('#frmAttach .submitfrmAttach').attr('disabled', false);
                        $('#frmAttach .submitfrmAttach').val('Submit');
                        getDocumentList();
                    }
                });
            }
        });

        $('#set_reminder').on('change', function(e) {
            var enabledCarryOver = $("input[name='set_reminder']:checked").val();
            if (enabledCarryOver == true) {
                $('.enable-reminder').removeClass('hidden');
            } else {
                $('.enable-reminder').addClass('hidden');
            }
        });

    });

    function personalDocument() {
        $('#type').val()
        $('#type').val('personal-document');
    }

    function companyDocument() {
        $('#type').val()
        $('#type').val('company-document');
    }


    function getDocumentList() {
        var company_id = $("#companyId").val();
        var user_id = $("#user_id").val();

        var csrfToken = $('meta[name="csrf-token"]').attr("content");

        $.ajax({
            url: '{{ route("admin.payroll.getDocumentsList", ["panel" => session("panel")]) }}',
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": csrfToken,
            },
            data: {
                company_id: company_id,
                user_id: user_id
            },
            success: function($response) {
                if ($response.code == 200) {
                    console.log($response);
                    $('#employe-personal-document').empty()
                    $('#employe-company-document').empty()

                    if ($response.data.employePersonalDocument.length > 0) {
                        $('#employe-personal-document-table').removeClass('hidden');
                        $.each($response.data.employePersonalDocument, function(index, value) {
                            var html = '<tr>\
                                    <td class="display-info">' + value.title + '</td><td>'
                            html += '<a href="' + value.employee_personal_document_link + '"title="Download" class="mr-2" target="_blank"><i class="material-icons">get_app</i></a>'
                            html += '<a href="javascript:void(0)" title="Delete" \
                                    upload-id="' + value.id + '" class="deleteButton">\
                                    <i class="material-icons">delete</i></a>';
                            html += '</td></tr>';
                            $('#employe-personal-document').append(html);
                        });
                    } else {
                        $('#employe-personal-document-table').addClass('hidden');
                        var html = '<div class="alert alert-warning" role="alert"> No Record Found </div>'
                        $('#employe-personal-document').append(html);
                    }

                    if ($response.data.employeCompanyDocument.length > 0) {

                        $('#employe-company-document-table').removeClass('hidden');
                        $.each($response.data.employeCompanyDocument, function(index, value) {
                            var html = '<tr>\
                                    <td class="display-info">' + value.title + '</td><td>'
                            html += '<a href="' + value.company_document_link + '"title="Download" class="mr-2" target="_blank"><i class="material-icons">get_app</i></a>'
                            html += '<a href="javascript:void(0)" title="Delete" \
                                    upload-id="' + value.id + '" class="deleteButton">\
                                    <i class="material-icons">delete</i></a>';
                            html += '</td></tr>';
                            $('#employe-company-document').append(html);
                        });
                    } else {
                        $('#employe-company-document-table').addClass('hidden');
                        var html = '<div class="alert alert-warning" role="alert"> No Record Found </div>'
                        $('#employe-company-document').append(html);
                    }


                } else {

                }
            },
            error: function(xhr, status, error) {},
        });
    }

    $(document).on('click', '.deleteButton', function(e) {

        var ev = $(e.target);
        var uploadId = $(e.target).parent('a').attr('upload-id');
        var url =
            "{{ route('admin.companies.delete_document', ['panel' => session('panel') ]) }}";
        axios.post(url, {
                id: uploadId
            })
            .then(function(response) {
                var trNumber = ev.parents('tbody').find('tr').length;
                if (trNumber == 1) {
                    ev.parents('table:first').addClass('hidden');
                    ev.parents('table:first').next('span').removeClass('hidden');
                }
                ev.parents('tr:first').remove();
                Snackbar.show({
                    pos: 'bottom-right',
                    text: 'Document removed successfully',
                    actionText: 'Okay'
                });
            })
            .catch(function(error) {});
    });
</script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/admin/project/store.css') }}">
{{--<script src="{{ mix('js/employees.js') }}"></script>--}}
@endpush