@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 0px;
        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;
    }
    .select:after {
        top: 12px !important;
        right: 18px !important;
    }
    .select-text {
        padding: 9px 5px 2px 5px !important;
    }
    .margin_top_ten {
        margin-top: 7px;
    }

    .multiselect_width {
        width: 250px !important;
    }
</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 >
            <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="" />
                        <input type="hidden" value="true" name="email_flag" class="email_flag" />
                        <input type="hidden" value="{{Session::get('role_id')}}" name="role_id" />
                        <input type="hidden" value="" id="new_otp" name="new_otp" />
                        <!-- <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">
                        <div class="float-left mr-2" style="margin-top: -2px;">
                            <input class="email_flag_toggle"checked type="checkbox" value="" style="width: 100%;height: 100%;color:#343434; font-size:13px; font-family: Roboto, sans-serief;">
                           <!--  <a class="search_btn toggle " case="on" style="margin-top: -3px;margin-right:-2px;">OFF</a> -->
                        </div>
                            &nbsp;<span class="float-left">Email Send**</span>
                        <a style="cursor:pointer; margin-right:-2px;" id="download_credentials" class="download_credentials search_btn">Download Credentials</a>
                        <a href="@if(env('APP_ENV') == 'production' && env('APP_SECURE') == true) javascript:void(0); @else javascript:submitform('bulk_insert_form'); @endif" class="search_btn @if(env('APP_ENV') == 'production' && env('APP_SECURE') == true) btn2_download_credentials  @endif" 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 @if(env('APP_ENV') == 'production' && env('APP_SECURE') == true) btn1_download_credentials @else btn_download_credentials @endif" 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>

<div class="modal fade" id="optModal" 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: 800px !important;margin-left: 0px !important;">
          <div class="modal-header">
            <span class="modal-title modal_title w-100" id="myModalLabelreasonModal"><b>One Time Password</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: 800px !important; height:115px;">
                    <div class="row mb-12">
                        <div class="col-lg-4">
                            {{-- <div class="input_div">
                                <div class="material-textfield margin-top-three">
                                    <input placeholder="Phone" type="text" name="number" id="phone" value="{{Auth::user()->cell_number}}" style="width: 100%;">
                                    <label>Phone</label>
                                </div>
                            </div> --}}
                            <div class="select select_width margin_left_five margin_top_ten select_box">
                                <select class="select-text selectpicker multiselect_width" name="phone" id="phone"  data-actions-box="true" title="Not Set">
                                    @foreach($numbers as $key => $nmbr)
                                    <option value="{{$key}}">{{$nmbr}}</option>
                                    @endforeach
                                </select>
                                <label class="branch_label select-label multi-lable font_weight">
                                   Select Number
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="input_div">
                                <div class="material-textfield margin-top-three">
                                    <input placeholder="Enter OTP" type="text" name="otp" id="otp" style="width: 100%;"  form="bulk_insert_form">
                                    <label>Enter OTP</label>
                                </div>
                            </div>
                            <small id="messageBoxOtp" style="color: red;display: none;">Please enter the OTP</small>
                        </div>
                        <div class="col-lg-4" id="generate">
                            <button type="button" id="generateBtn" class="search_btn" onclick="generateOtp()" style="margin-right: 3px; margin-top: 9px;">Generate</button><span id="timer"></span>
                        </div>
                    </div>
                    <p>One - Time Password (OTP) will be send to your registered mobile number. Please enter it on the screen to get verify.</p>
                </div>
            </form>
            <div class="modal-footer py-2" style="border-top: 0 none; padding-bottom: 0px !important;">
                <div class="disbursement_modal_footer" style="width: 800px;">
                    <div class="footr float-right">
                        <button id="submit_request"  class="search_btn btn_download_credentials" style="margin-right: 3px; margin-top: 5px;">Confirm</button>
                        <button class="search_btn mt-1" onclick="closePopUpOtp()" 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');
    });

    function generateOtp(){
        $("#otp").val("")
        $("#generateBtn").text("Resend");
        $("#generateBtn").attr("disabled");
        clearInterval(interval);
        var display = document.getElementById('timer');
        display.textContent = "";
        startTimer(300, display);
        $.ajax({
            type: "POST",
            url: $('.base_url').val()+'api/org/generateOtp',
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data: {number: $("#phone").val()},
            success: function (response) {
                $(".success_message").
                $('.success_message').show();
                $('.success_message_text').html('Request submitted successfully.');
            }
        });
    }
    var interval = null;
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        interval = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            // Display the timer in the specified HTML element
            display.textContent = minutes + ":" + seconds;

            // Decrease timer by 1 second
            if (--timer < 0) {
                clearInterval(interval);
                console.log(timer);
                display.textContent = "";
            }
        }, 1000); // Update the timer every 1 second (1000 milliseconds)
    }

    var flag = false;
    var flag2 = false;

    $(document).on('click', '.btn2_download_credentials', function () {
        flag = true;
        flag2 = false;
        //ajaxformsubmit(2);
        if ($("#bulk_insert").val() == '') {
            $('.error_message').show();
            $('.error_message_text').html('Please select .csv file to submit.');
            HideMessage('.error_message');
            return false;
        } else {
            $('#optModal').modal('show');
        }
    });

    $(document).on('click', '.btn1_download_credentials', function () {
        flag = true;
        flag2= true;
        //ajaxformsubmit(2);
        if ($("#reason").val() == '') {
            $('#messageBox').css("display", "block");
            return false;
        } else {
            $("#comments").val($("#reason").val());
            $('#optModal').modal('show');
        }
    });

    $(document).on('click', '.btn_download_credentials', function () {
        if(flag == true){
            if ($("#otp").val() == '') {
                $('#messageBoxOtp').css("display", "block");
                return false;
            } else {
                $("#comments").val($("#reason").val());
                $("#new_otp").val($("#otp").val());
            }
        }
        else{
            flag2 = true;
            if ($("#reason").val() == '') {
                $('#messageBox').css("display", "block");
                return false;
            } else {
                $("#comments").val($("#reason").val());
            }
        }
        if(flag2 == true){
            ajaxformsubmit(2);
        }
        else{
            ajaxformsubmit(1);
        }

    });

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

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

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

    function closePopUpOtp() {
        $('#optModal').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());
    });
    $(".email_flag_toggle").click(function () {
        var toogle_flag=$('.email_flag').val();
        var toogle_value='';
        toogle_flag=$(".email_flag_toggle").is(':checked');

        // if(toogle_flag == 'true')
        // {
        //     toogle_flag='false';
        //     toogle_value='OFF';
        // }
        // else
        // {
        //     toogle_flag='true';
        //     toogle_value='ON';
        // }
        $('.email_flag').val(toogle_flag);
        $('.email_flag_toggle').val(toogle_flag);
    });
    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 {
        $( ".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();
                var flag=false;
                if(response.not_download)
                {
                    flag=true;
                }
                if (i == 2 && !flag) {
                    var fileName='../../../../../../uploads/Credentials_Detail.xls';
                    download(fileName,'Credentials_Detail.xls');
                }
                if (response.status == 'pass') {
                    $('#reasonModal').modal('hide');
                    $('#optModal').modal('hide');
                    $("#generateBtn").text("Generate");
                    $("#timer").html("");
                    $("#otp").html("");
                    $("#new_otp").html("");
                    clearInterval(interval);
                    $('.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 {
                    console.log(response)
                    if(response.code == "400"){
                        $('#reasonModal').modal('hide');
                        $('#optModal').modal('hide');
                        $("#generateBtn").text("Generate");
                        $("#timer").html("");
                    }
                    $('.error_message').show();
                    $('.error_message_text').html(response.error);
                    HideMessage('.error_message');
                }
            }
        });
    }
    }
</script>
@endsection
@stop