@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/datatables.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
@section('content')
<style>
    #button-list, .button-list {
        list-style: none;
        display: inline-block;
        width: 100%;
        margin-top: 13px;
        text-align: right;
    }
    #dialog {
        display: none;
    }
    .gray {
        color: #666666;
    }
    h1, h2 {
        font: 12px Arial, Tahoma, Verdana;
        font-weight: 600;
    }
    #wrapper {
        min-height: 93.6%;
        padding-bottom: 0px;
        position: relative;
        width: 1280px;
        background: #FFFFFF url('../assets/images/backgrounds/header_bgtile.gif') top repeat-x;
        margin: 0 auto;
        padding: 0px;
        text-align: left;
        display: inline-block;
    }
    #footer .content {
        height: auto;
        background: none;
        text-indent: 15px;
        padding-top: 7px;
        color: #FFF;
        text-decoration: none;
    }
    #wrapper #container {
        position: relative;
        padding: 12px 2px 20px 7px;
    }
    h1:first-child {
        margin: -3px 0 0;
    }
    h1{
        font: 12px Arial, Tahoma, Verdana;
        color: #0096dc;
        font-weight: 600;
        margin-bottom: 5px !important;
        padding: 0px 0 5px 7px;
    }
    #wrapper #container .section {
        float: left;
        background: #FFFFFF;
        width: 100%;
    }
    #wrapper #container.login .box, #wrapper #container .section .box {
        display: block;
        margin: 0 5px 10px 5px;
        zoom: 1;
        background: #fcfcfc;
        border: 1px solid #e7e7e7;
        border-spacing: 0;
        -webkit-border-radius: 4px 4px 0 0;
    }
    #wrapper #container .section .box .title {
        display: block;
        position: relative;
        background: url('../assets/images/backgrounds/box-title.gif') repeat-x left top;
        padding: 8px 10px 0;
        font: 12px/1em Verdana, Arial, Tahome;
        color: #333333;
        height: 30px;
        font-weight: 600;
    }
    #wrapper #container .section .box {
        border-spacing: 0;
    }
    #wrapper{
        text-align: left;
    }
    #wrapper #container .section .box .content {
        display: block;
        padding: 5px;
        padding-right: 15px;
        padding-left: 15px;
    }
    form {
        display: block;
        padding: 0;
        background: #fff;
        margin-top: 0em;
    }
    table, td, tr, th {
        padding: 0;
        margin: 0;
        border-collapse: collapse;
        text-align: left;
    }
    table {
        width: 100%;
        background: #fff;
        border: 0;
    }
    #wrapper #container .section .box .footer {
        display: block;
        position: relative;
        background: #e6e6e6;
        padding: 6px 10px 4px;
        font: 12px/1em Verdana, Arial, Tahome;
        color: #333333;
        height: 26px;
    }
    #wrapper #container .section .box .footer #button-list {
        margin-top: 1px;
        text-align: right;
        width: 100% !important;
    }
    #button-list, .button-list {
        list-style: none;
        display: inline-block;
    }
    #button-list a{
        position: relative;
        padding: 2px 6px 2px 6px;
        border: 1px solid #e6e6e6;
        background: #fcfcfc url('../assets/images/backgrounds/btn_bgtile.gif') repeat-x;
        font: 12px Tahoma, Arial, Verdana;
        color: #0078bd;
        margin: 5px 0 5px 2px;
        text-decoration: none;
    }
    #wrapper #container .section .box .footer #button-list{
        text-align: right;
    }
    table tbody td input.file {
        width: 95%!important;
        margin-left: -2px;
    }
    input.file {
        margin: 2px;
    }
    table tbody td input {
        background: url('../assets/images/backgrounds/input-back.gif') repeat-x left top;
        border: 1px solid #dcdcdc;
        outline: 0;
        padding: 2px;
        font: 12px/1.2em Arial;
    }
    table tbody td .file-btn {
        margin: 2px 0 0 -28px;
    }
    .file-btn {
        background: url('../assets/images/backgrounds/Attachment.svg') no-repeat left top !important;
        text-align: right;
        background-size: cover !important;
        width: 21px;
        height: 21px;
        background-position: right center;
        display: inline-block;
        margin-bottom: -6px;
        overflow: hidden;
        cursor: pointer;
        margin-left: -25px;
    }
    .evidence_footer {
        display: block;
        position: relative;
        background: #e6e6e6;
        padding: 6px 10px 4px;
        font: 12px/1em Verdana, Arial, Tahome;
        color: #333333;
        height: 27px;
    }

    .evidence_footer #button-list{
        margin-top: 1px;
        text-align: right;
        width: 100% !important;
        list-style: none;
        display: inline-block;
    }
    .evidence_footer {
        height: 31px;
    }

    #evidence_form .input_div {
        margin: 20px 0px 0px 0px !important;
    }
</style>
<div class="breadcrum">
    Org & Emp / Company Setup / Organization Structure / <span class="text-primary">Employee Onboarding Utility</span>
</div>
<div id="container" style="padding-top: 0;">
    <div class="section">
        <div>
            <div id="response"></div>
            @if ($data['success'])
                <p class="alert alert-success">{{$data['success']}}</p>
            @endif
            @if ($data['updated'])
                <p class="alert alert-success">{{$data['updated']}}</p>
            @endif
            @if ($data['warning'])
                <p class="alert alert-danger">{{$data['warning']}}</p>
            @endif
            @if ($data['error'])
                <p class="alert alert-danger">{{$data['error']}}</p>
            @endif
            <div class="box">
                <div class="title">
                    Employee Onboarding Utility
                </div>
                <div class="content">
                    <form id="bulk_insert_form" method="post" action="{{ url('/orgstructure/emp_onboarding') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="comments" id="comments" value="" />
                        <table id="" class="" style="font-size: small;">
                            <tbody>
                                <tr>
                                    <td width="1"><strong>Select File</strong></td>
                                    <td>
                                        <input class="file" id="upload-file" style="display: inline;" readonly>
                                        <div class="file-btn" style="width: 21px; height: 21px; background-position: right center; display: inline-block; margin-bottom: -6px; overflow: hidden; cursor: pointer;">
                                            <input type="file" name="bulk_update" id="bulk_update" style="position: relative; height: 21px; width: 200px; display: inline; margin-bottom: -6px; cursor: pointer; opacity: 0; margin-left: -179px;">
                                        </div>
                                    </td>
                                    <td width="1">
                                        <strong>
                                            <a href="{{ URL::asset('assets/templates/Final_Employee_Onboarding_File_Template_1_3.xlsx') }}">
                                                Download Template
                                            </a>
                                        </strong>
                                    </td>
                                    <td style="text-align: center; width: 17%">
                                        <strong> Version 1.3 | Headers 265</strong>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="footer">
                    <div id="button-list">
                        <a class="submit_template" style="cursor:pointer;">Submit</a>
                        <a href="javascript:;" id="file-instruction-btn" data-toggle="modal" data-target="#instructionModal">File Instructions</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelreasonModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="margin-left: 34%;">
        <div class="modal-content modal_content" style="width: 500px !important;">
            <div class="modal-header">
                <span class="modal-title modal_title w-100" id="myModalLabelreasonModal"><b>Please Provide Reason</b></span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="padding-top: 5px;">
                    <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                </a>
            </div>
            <div class="modal-body modal_body" style="width: 500px !important;">
                <div class="table modal_table">
                    <form id="evidence_form">
                        @csrf
                        <div class="col-md-12 display_item_flex" style="margin-top: 4px;margin-bottom: -9px;margin-left: 4px;color: red;display: none;">
                            <div id="messageBox">Please enter the reason.</div>
                        </div>
                        <div class="col-md-12 input_div display_item_flex">
                            <div class="material-textfield" style="width: 100%;">
                                <input  namne="reason" id="reason" type="text" style="width: 100%;">
                                <label>Reason</label>
                            </div>
                        </div>&nbsp;
                        <div class="col-md-12 display_item_flex">
                            <div class="material-textfield" style="width: 100%;">
                                <input id="evidence-file" class="file" style="display: inline;width: 100%;height: 17px;"  readonly>
                                <label>Evidence</label>
                                <div class="file-btn" style="width: 21px; height: 19px; background-position: right center; display: inline;cursor: pointer;margin-left: -32px;padding: 4px;">
                                    <input name="evidence" id="evidence"  form="bulk_insert_form" style="position: relative;height: 20px;width: 156px;display: inline;cursor: pointer;opacity: 0;margin-left: -143px;margin-top: -10px;" type="file" accept=".csv">
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <input type="hidden" name="credentials" id="credentials" value="1" />
            <div class="modal-footer evidence_footer">
                <div id="button-list" style="width:95%">
                    <a href="javascript:void(0);" class="btn-default btn_download_credentials">Submit</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="instructionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelinstructionModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content" style="width: 700px !important;">
            <div class="modal-header">
                <span class="modal-title modal_title w-100" id="myModalLabelinstructionModal"><b>File Upload Instructions</b></span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="padding-top: 5px;">
                    <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                </a>
            </div>
            <div class="modal-body modal_body" style="width: 700px !important;">
                <div class="table">
                    <div class="content">
                        <table id="file-instruction" style="width: 665px !important;">
                            <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Instructions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><strong>1</strong></td>
                                <td>Please upload CSV(Comma Delimited) .csv file only.</td>
                            </tr>
                            <tr>
                                <td><strong>2</strong></td>
                                <td>By Default Group_Name is Group 1</td>
                            </tr>
                            <tr>
                                <td><strong>3</strong></td>
                                <td>If an employee is already available is system than file will not update (Emp_Code, Full_Name, Password)</td>
                            </tr>
                            <tr>
                                <td><strong>4</strong></td>
                                <td>Official_Email should be unique.</td>
                            </tr>
                            <tr>
                                <td><strong>5</strong></td>
                                <td>If employee is Roster then add "Yes" in column "Shift_Roster_Applied?_(Yes_No)" in case of <br/> New Employee or Update an employee.</td>
                            </tr>
                            <tr>
                                <td><strong>6</strong></td>
                                <td>
                                    Minimum required fields to insert or update employee data are mention below
                                    <ul>
                                        <li>Company_Name</li>
                                        <li>Section_Department_Country</li>
                                        <li>Section_Department_Name</li>
                                        <li>Emp_Code</li>
                                        <li>Official_Email</li>
                                        <li>Full_Name</li>
                                        <li>Job_Status</li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>7</strong></td>
                                <td>
                                    Minimum required fields to insert or update bank information
                                    <ul>
                                        <li>Bank_Name</li>
                                        <li>Branch_City</li>
                                        <li>Bank_Branch_Name</li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("a.submit_template").click(function () {
            $('#messageBox').css("display", "none");
            $('#reason').val('');
            $('#evidence-file').val('');
            $('#evidence').val('');
            $('#reasonModal').modal('show');
        });
    });

    $(document).on('click', '.btn_download_credentials', function () {
        if ($("#reason").val() == '') {
            $('#messageBox').css("display", "block");
            return false;
        } else {
            $("#comments").val($("#reason").val());
        }
        $("#bulk_insert_form").submit();
    });

    $('#reason').on('input', function() {
        if($(this).val() != ''){
            $('#messageBox').css("display", "none");
        }
    });

    $("input#bulk_update").change(function () {
        $('#upload-file').val($(this).val());
    });

    $("input#evidence").change(function () {
        $('#evidence-file').val($(this).val());
    });
</script>
@endsection
@stop