@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>
    table thead tr th, table tbody td {
     border: unset !important;
    }
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .section {
        background-color: transparent !important;
    }
    .title {
        background: transparent linear-gradient(180deg, #F7F7F7 0%, #D6D6D6 100%)
        0% 0% no-repeat padding-box !important;
        opacity: 1 !important;
        height: 28px !important;
        font-family: Roboto, sans-serif !important;
    }
    .search_btn {
        margin-top: -2px;
    }
    #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: white;
        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;
    }
    .footer {
        margin-top: -7px;
    }
    #wrapper #container .section .box .footer {
        display: block;
        position: relative;
        background: #e6e6e6;
        padding: 6px 10px 4px;
        font: 12px/1em Verdana, Arial, Tahome;
        color: #333333;
        height: 27px;
    }
    #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: 100%!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="row">
<div style="width:1259px; margin-left:23px;">
    <div id="container">
        <div class="section">
            <div>
                <div id="response"></div>
                <div class="box">
                    <div class="title">
                        <span style="margin-left: -1px !important; color: #343434;font-size: 13px;">Upload Loan & Advance Data</span>
                    </div>
                    <div class="content">
                        <form method="post" class="form_loan" action="{{ url('loanadvance/utility') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="change_by" value="{{getAuthEmpName()}}">
                            <table id="" class="" style="font-size: small;">
                                <tbody>
                                    <tr>
                                        <td width="1"><strong>Select File</strong></td>
                                        <td style="width: 300px;">
                                            <input class="file" id="upload-file" style="display: inline;" readonly>
                                            <div class="file-btn" style="width: 17px; height: 17px; background-position: right center; display: inline-block; margin-bottom: -6px; overflow: hidden; cursor: pointer;">
                                                <input type="file" name="import_file" id="import_file" style="cursor: pointer; opacity: 0; margin-left: -179px;">
                                            </div>
                                        </td>
                                        <td >
                                            <strong>
                                                <a href="{{ URL::asset('assets/templates/Loan_Advances_Upload_Template.csv') }}" download>
                                                    Download Template
                                                </a>
                                            </strong>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="footer">
                        <div id="button-list">
                            <button class="search_btn submit_template margin_right_two">Submit</button>
                            <!-- <a href="javascript:;" id="file-instruction-btn" data-toggle="modal" data-target="#instructionModal">File Instructions</a> -->
                        </div>
                    </div>
                </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;" >
                                <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: 163px;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">
                            <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>
@include('notification')
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    var response_message =