@extends('portal.layout.app')
<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>
   .notification_custom {
      bottom: 6% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      margin-left: auto !important;
   }
    .ml_bb{
        margin-left: 21px;
    }
    .mt-fifteen{
        margin-top: -15px;
    }
    .margin-top-three {
        margin-top: -3px;
    }
    .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;
    }
    #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: 13px Roboto, sans-serif;
        color: #343434;
        height: 30px;
        font-weight: 600;
    }
    #wrapper #container .section .box {
        border-spacing: 0;
        margin-top: 10px;
    }
    #wrapper{
        text-align: left;
    }
    #wrapper #container .section .box .content {
        display: block;
        padding: 5px 5px 0px 5px;
        padding-right: 15px;
        padding-left: 15px;
    }
    form {
        display: block;
        padding: 0;
        background: #fff;
        margin-top: 0em;
    }
    #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: 11px Roboto, sans-serif;
        color: #3080EA;
        margin: 5px 0 5px 2px;
        text-decoration: none;
    }
    #wrapper #container .section .box .footer #button-list{
        text-align: right;
    }
    input.file {
        margin: 2px;
    }
    #upload-file {
        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;
    }
    body {
        font: 12px Tahoma, Arial, Verdana;
        color: #4c4c4c;
    }
    .file-btn {
        background: url('../assets/images/backgrounds/Attachment.svg') no-repeat left top !important;
        text-align: right;
        background-size: cover !important;
        width: 17px;
        height: 17px;
        background-position: right center;
        display: inline-block;
        margin-bottom: -6px;
        overflow: hidden;
        cursor: pointer;
        margin-left: -25px;
    }
    .content form div label {
        font-size: 1.1rem;
        color: #4c4c4c;
        font-weight: bold;
    }
    .content form div .right {
        display: block;
        margin: 0 0 0 35%;
        padding-left: 10px;
        border-left: 1px solid #eee;
    }
    .content form div:nth-child(odd) {
        background-color: #FAFAFA;
    }
    .content form div {
        display: block;
        position: relative;
        border: none;
        line-height: 26px;
        padding: 0;
    }
    .modal-content {
        width: 596px !important;
        margin-left: 102px !important
    }
    .search_btn {
        margin-left: unset;
        border-radius: 3px;
    }
    .modal-header {
        height: 29px !important;
    }
    .mb-12 {
        margin-bottom: 1.5rem;
    }
    .file-input {
        cursor: pointer;
        opacity: 0;
        margin-left: -179px;
    }
</style>
<div class="breadcrum">
    Settings / Company Setup / <span class="text-primary">Send Login Credentials Details</span>
</div>
<div id="container" style="padding-top: 0;">
    <div class="section">
        <div style="width:1250px; margin-left:8px;">
            <div class="box">
                <div class="title">Download Sample Template for Credentials</span>
                </div>
                <div class="content">
                    <form name="bulk_insert_form" id="bulk_insert_form" method="post" action="{{ url('/api/org/getempcredentials') }}" enctype="multipart/form-data">
                        @csrf    
                        <input type="hidden" name="comments" id="comments" value="" />
                        <!-- <div> -->
                         
                            <!-- <div class="right"> -->
                        <div style=" display:flex; margin-top:3px;">
                            <div style="width:70px; margin-left:10px; height:40px; padding-top:7px;">
                                <b style="color:#343434; font-size:13px; font-family: Roboto, sans-serief;">Select File</b>
                            </div>
                            <div>
                                <input class="file" id="upload-file" style="margin-top: 7px; margin-left: 10px; display: inline; width: 285px;" readonly>
                                <div class="file-btn" style="width: 17px; height: 17px; background-position: right center; display: inline-block; margin-bottom: -5px; overflow: hidden; cursor: pointer;">
                                    <input type="file" name="bulk_insert" id="bulk_insert" style="position: relative; height: 21px; width: 200px; display: inline; margin-bottom: -6px; cursor: pointer; opacity: 0; margin-left: -179px;">
                                </div>
                            </div>
                            <div style="margin-left:15px; padding-top:14px;">
                                <a href="{{ URL::asset('assets/templates/credentials_template.csv') }}" download style="margin-left: 9px;"><span style="font-size: 12px; font-family: Roboto, sans-serif; color: #3080EA">Download Template</span></a>
                            </div>
                        </div>
                            <!-- </div> -->
                        <!-- </div> -->
                        <input type="hidden" name="credentials" id="credentials" value="0">
                    </form>
                </div>
                <div class="footer">
                    <div id="button-list">
                        
                        <a style="cursor:pointer; margin-right:-2px;" id="download_credentials" class="download_credentials search_btn">Download Credentials</a>
                        <a href="javascript:submitform('bulk_insert_form')" class="search_btn" style="margin-right:-2px;">Submit</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Reason model start -->
<div class="modal fade" id="reasonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelreasonModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <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="margin-top: -20px !important;">
              <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
            </a>
          </div>
            <form>
                @csrf
                <input type="hidden" id="submit_type">
                <div class="modal-body modal_body" style="width: 500px !important; height:115px;">
                    <div class="col-md-12 display_item_flex">
                        <div id="messageBox" style="color: red;display: none;">Please enter the reason.</div>
                    </div>
                    <div class="row mb-12">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield margin_left_twentythree margin-top-three">
                                <input placeholder="Reason" type="text" name="reason" id="reason" style="width:458px;">
                                <label>Reason</label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-12">
                        <div class="input_div display_item_flex">
                            <div class="material-textfield ml_bb mt-fifteen">
                                <input id="evidence-file" class="file" style="width: 458px;" placeholder="Evidence">
                                <label>Evidence</label>
                            </div>
                            <div class="file-btn" style="position: absolute; float: right;margin-left: 460px;margin-top: -8px;">
                                <input type="file" class="file-input" name="evidence" id="evidence"  form="bulk_insert_form">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer py-2" style="border-top: 0 none; padding-bottom: 0px !important;">
                <div class="disbursement_modal_footer">
                    <div class="footr float-right">
                        <button id="submit_request" class="search_btn btn_download_credentials" style="margin-right: 3px; margin-top: 5px;">Download</button>
                        <button class="search_btn mt-1" onclick="closePopUp()" style="margin-right: 10px;">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@section('scripts')
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $("a.download_credentials").click(function(){
        $("#credentials").val(1);
        $('#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());
        }
        ajaxformsubmit(2);
    });

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

    function closePopUp() {
        $('#reasonModal').modal('hide');
    }

	function submitform(formname) {
        ajaxformsubmit(1);
    }

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

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

    function ajaxformsubmit(i) {
        if (i == 1 && !$("#bulk_insert").val()) {
            $('.error_message').show();
            $('.error_message_text').html('Please select .csv file to submit.');
            HideMessage('.error_message');
            return false;
        } else {
            $('#reasonModal').modal('hide');
        }
        $( ".loader-wrapper" ).html('<div id="loader-body1" class="loading" ><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div></div>');
        $( ".loader-wrapper" ).show();
        var formData = new FormData(document.getElementById('bulk_insert_form'));
        $.ajax({
            type: "POST",
            url: $('.base_url').val()+'api/org/getempcredentials',
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (response) {
                removeLoader();
                if (i == 2) {
                    var fileName='../../../../../../uploads/Credentials_Detail.xls';
                    download(fileName,'Credentials_Detail.xls');
                }
                if (response.status == 'pass') {
                    $('.success_message').show();
                    if (i == 1) {
                        $('.success_message_text').html('Request submitted successfully.');
                    } else {
                        $('.success_message_text').html('Record downloaded successfully.');
                    }
                    HideMessage('.success_message');
                } else {
                    $('.error_message').show();
                    $('.error_message_text').html(response.error);
                    HideMessage('.error_message');
                }
            }
        });
    }
</script>
@endsection
@stop