<style>
    .br-l{
        border-left: 2px solid #ddd;
        border-left-style: dashed;
    }
    .br-b{
        border-bottom: 2px solid #ddd;
        border-bottom-style: dashed;
    }
    .color{
        color:#6dc0f9;
    }
    .nav-tabs-simple>li:after {
        background-color: #6dc0f9;
    }
    .EditRow{
        font-size:20px;
        cursor:pointer;
    }
    .EditRow:hover{
        color: rgb(0, 144, 217);
    }
    #ExchangeRate tr{
        -webkit-transition:-webkit-transform 0.2s linear;
        -moz-transition:-moz-transform 0.2s linear;
        transition:transform 0.2s linear;
    }
    #ExchangeRate tr.Edit{
        -webkit-transform: scale(1.05) rotate(0);
        -moz-transform: scale(1.05) rotate(0);
        transform: scale(1.05) rotate(0);
    }
    #ExchangeRate tr.Faded > td{
        opacity:0.5;
        cursor:default;
    }
    #ExchangeRate tr.Faded,#ExchangeRate tr.Faded > td{
        background-color:#fff !important;
    }
    #ExchangeRate tr.Edit > td{
        background-color:#eee !important;
    }
    #ExchangeRate .Hint{
        position: absolute;
        font-size: 10px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
        bottom: 2px;
        right: 4px;
        color: rgb(153, 153, 153);
    }
    .open>.dropdown-menu {
        position: relative;
        width: 100%;
        overflow: auto;
    }
    .dropdown-menu>li>a{
        color: #000 !important;
        opacity: 1;
        cursor: pointer;
    }
    .dropdown-menu>li>a:hover{
        background-color: #6dc0f9;
        color: white !important;
    }
    #ExchangeRate tbody tr td input{
        width: 100%;
        margin: 0;
        border: 1px solid rgba(0,0,0,0.02);
        background-color: #f0f0f0;
    }
    .ChangeColorAddCurrency{
        color:#000 !important;
    }
    .nav-tabs.nav-tabs-left~.tab-content {
        border-left:0;
    }
    .select2-container .select2-choice{
        opacity: 1;
        background: #e5e5e5;
    }
</style>
<div class="col-xs-12 col-md-12 col-lg-12">

    <div class="container-fluid container-fixed-lg bg-white">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('currency_settings'); ?></div>
            <div class="pull-right">
                <i class="fa fa-plus-circle" id="AddCurrency" onclick="addCurrency()" style="color: #6dc0f9;"></i>
            </div> 
            <input type="hidden" value="<?php echo $today ?>" id="RateDate"/>
            <div class="col-xs-12 col-md-12 col-lg-12" style="background:#fff">
                <ul class='nav nav-tabs nav-tabs-simple <?php echo $Is_Arabic ? "nav-tabs-right" : "nav-tabs-left" ?>  bg-white' style="<?php echo $Is_Arabic ? "border-left:1px solid rgba(0,0,0,0.1)" : "border-right:1px solid rgba(0,0,0,0.1);" ?>" id='tab'>
                    <?php
    $Counter = array(CommonLanguage::getMessage('default'),
                     CommonLanguage::getMessage('second'),
                     CommonLanguage::getMessage('third'),
                     CommonLanguage::getMessage('fourth'),
                     CommonLanguage::getMessage('fifth'),
                     CommonLanguage::getMessage('sixth'),
                     CommonLanguage::getMessage('seventh'),
                     CommonLanguage::getMessage('eighth'),
                     CommonLanguage::getMessage('nineth'),
                     CommonLanguage::getMessage('tenth'),
                     CommonLanguage::getMessage('eleven'));
                   
                   
                  
                   for ($x = 0; $x < ($number); $x++) {
                       
                       echo ("<li class='tab-{$x}'>
                    <a data-toggle='tab' data-type='initialvalue' href='#tab-{$x}' aria-expanded='true'>{$Counter[$x]} </a>
                </li>
           ");
                   }
                    ?>
                    <li class=""> <a data-toggle='tab' href='#tab3Inspire' aria-expanded='true'><?php print CommonLanguage::getMessage('exchange_rate'); ?></a></li>    
                </ul>
                <div class='tab-content bg-white'>
                    <?php
                    //				$Counter = array("Default","Second","Third","Fourth","fifth","sixth","seventh","eighth","nineth","tenth","eleven");
                    $val = 0;
                   // echo"<pre>";print_r($list);exit;
                    for ($x = 0; $x < $number; $x++) {
                    
                        $Currency = $list[$x];
                        $val = $x + 1;
                        echo ("<div class='tab-pane ' id='tab-{$x}'>
                    <div class='row column-seperation'>
                        <div class='col-md-6'>
                            <h5>
                                <span class='semi-bold '> {$Counter[$x]} :<span  class='OldCurrencyName' style='color:#4c0870 '> {$Currency['Currency_Name']}-{$Currency['Currency_Code']}</span>  </span>
                                <span class='bold color ' ></span>
                            </h5>
                        </div>
                        <div class='col-md-6'>
                            <h3 class='semi-bold'>
                               " . CommonLanguage::getMessage('change') . "  {$Counter[$x]} 
                            </h3>
                            <div class='input-group-btn DropDownForForms Closable CurrencyDropDown' id='CurrencyDropDown' >
                                <button type='button' class='btn btn-complete btn-block dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
                                    <span><strong>{$Currency['Currency_Name']}-{$Currency['Currency_Code']} </strong></span>
                                    <input type='hidden' value='{$Currency['Currency_ID']}' class='form-control ignore Currency' name='Currency_ID' id='{$val}' onkeyup='return false' onkeydown='return false' required/>
            </button>
        <ul class='dropdown-menu' >
 {$list_curr}
            <li class='divider'></li>
            <li><a class='LoadMore'>" . CommonLanguage::getMessage('More') . "..</a></li>
        </ul>
    </div>   
</div>
</div>
</div>   
");
                    }
                    ?>
                    <div class="tab-pane" id="tab3Inspire">
                        <h3 class="semi-bold">
                            <?php print CommonLanguage::getMessage('exchange_rate'); ?>
                            <i class="fa fa-plus-circle AddRow" onclick="AddRow()"  style="color:#4c0870;margin-left: 15px;"></i>
                        </h3>
                        <table class="table table-condensed " id="ExchangeRate">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th ><?php print CommonLanguage::getMessage('From'); ?></th>
                                    <th ><?php print CommonLanguage::getMessage('To'); ?></th>
                                    <th><?php print CommonLanguage::getMessage('exchange_rate'); ?></th>
                                    <th></th>
                                </tr>
                                <?php
                                for ($i = 0; $i < count($CurrencyTable); $i++) {
                                    $FromID = $CurrencyTable[$i]['from_currency'];
                                    $ToID = $CurrencyTable[$i]['to_currency'];
                                    $Rate = $CurrencyTable[$i]['ExchRate'];
                                    $From = CurrencyFactory::getCurrencyCodeByID($FromID);
                                    $To = CurrencyFactory::getCurrencyCodeByID($ToID);
                                ?>
                            </thead>
                            <tbody>
                                <td style="text-align:center">
                                    <div class="EditRow" onclick="EditMe(this)"><i class="fa fa-edit"></i>
                                    </div>
                                </td>
                                <td class='from_currency' id=<?php echo $FromID ?> ><input class='from_currency' type="hidden" value="<?php echo $FromID ?>" ><?php echo $From; ?></td>
                                <td class='to_currency'id=<?php echo $ToID ?>><input class='to_currency' type="hidden" value="<?php echo $ToID ?>" ><?php echo $To; ?></td>
                                <td class=" rate " id="ExchRate" name="ExchRate" ><input class="ExchRate" type="text" value="<?php echo $Rate; ?>" style="border: none;background: transparent;"></td>
                                <td style="text-align:center">

                                </td>
                            </tbody>
                            <?php } ?>
                        </table>
                        <p class="pull-right">
                            <button class="btn btn-complete btn-cons" id="SubmitCurrency"  type="button"><?php print CommonLanguage::getMessage('Save'); ?></button>
                        </p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var Failed_Submit = <?php echo json_encode(CommonLanguage::getMessage('Failed_Submit')); ?>,
        Submitted_Successfully = <?php echo json_encode(CommonLanguage::getMessage('Submitted_Successfully')); ?>,
            your = <?php echo json_encode(CommonLanguage::getMessage('your')); ?>,
                currency_is = <?php echo json_encode(CommonLanguage::getMessage('currency_is')); ?>,
                    currencyLang = <?php echo json_encode(CommonLanguage::getMessage('Currency')); ?>,
                        more = <?php echo json_encode(CommonLanguage::getMessage('More')); ?>,
                            select_currency = <?php echo json_encode(CommonLanguage::getMessage('Select_Currency')); ?>,
                                more_than_ten = <?php echo json_encode(CommonLanguage::getMessage('more_than_ten')); ?>,
                                    change = <?php echo json_encode(CommonLanguage::getMessage('change')); ?>,
                                        nbArr = [<?php
                                            echo json_encode([CommonLanguage::getMessage("default"),
                                                              CommonLanguage::getMessage("second"),
                                                              CommonLanguage::getMessage("third"),
                                                              CommonLanguage::getMessage("fourth"),
                                                              CommonLanguage::getMessage("fifth"),
                                                              CommonLanguage::getMessage("sixth"),
                                                              CommonLanguage::getMessage("seventh"),
                                                              CommonLanguage::getMessage("eighth"),
                                                              CommonLanguage::getMessage("nineth"),
                                                              CommonLanguage::getMessage("tenth")]);
                                            ?>];
    $(function () {
        $("body").addClass("NoSearch")
        $("body .search-link[data-toggle='search']").html("<i class='pg-search'></i>Click here to <span class='bold'>search</span>")
        $("#tab-0").addClass("active");
    })
    var Alert = $('<div id="CurrencyValidationAlert" class="WizardValidationAlert alert"></div>');
    Alert.insertAfter($(".panel-title"))
    $("#tab > li").on("click", function () {
        ReloadScroll()
    })
    $("#SubmitCurrency").on("click", function () {
        var Data = {
            Exchange_Rate_Date: $('#RateDate').val(),
            Currency: [],
            Entry: [],
            AddCurrency: [],
            ExRate: [],
            UpdateRate: []
        };
        $(".CurrencyDropDown input").each(function () {
            var me = $(this);
            if ($.trim(me.val()) != "") {
                Data.AddCurrency.push({
                    Currency_ID: me.val(),
                    Entry_ID: me.attr("id")
                })
            }
        })
        $(".CurrencyDropDown input").each(function () {
            var me = $(this);
            if ($.trim(me.val()) != "") {
                Data.Entry.push({
                    Entry_ID: me.attr("id")
                })
            }
        })
        $(".CurrencyDropDown input").each(function () {
            var me = $(this);
            if ($.trim(me.val()) != "") {
                Data.Currency.push({
                    Currency_ID: me.val(),
                    Entry_ID: me.attr("id")
                })
            }
        })
        $('#ExchangeRate tbody tr').each(function () {
            var me = $(this);
            Data.UpdateRate.push({
                from_currency: me.find('td > input.from_currency').val(),
                to_currency: me.find('td > input.to_currency').val(),
                ExchRate: me.find('td > input.ExchRate').val()
            })
        })
        $('#ExchangeRate tbody tr').each(function () {
            var me = $(this);
            Data.ExRate.push({
                from_currency: me.find('td > input.from_currency').val(),
                to_currency: me.find('td > input.to_currency').val(),
                ExchRate: me.find('td > input.ExchRate').val()
            })
        })
        $.ajax({
            url: "ACCAjax/createCurrencySettings",
            data: Data,
            method: 'POST',
            complete: function (v1, v2) {
                if (v2 == 'success') {
                    $("#CurrencyValidationAlert").addClass("alert-success").empty().html(Submitted_Successfully);
                    $("#CurrencyValidationAlert").fadeOut(2600, "linear")
                    $(document.body).animate({scrollTop: 0}, 800)
                } else {
                    $("#CurrencyValidationAlert").addClass("alert-danger").empty().html(Failed_Submit);
                    $("#CurrencyValidationAlert").fadeOut(2600, "linear")
                    $(document.body).animate({scrollTop: 0}, 1000)
                }
            }
        });
    })
    function addCurrency() {
        var name = nbArr[0];
        var x = ($("#tab").find("li").length - 1);
        if (x < 10) {
            //  alert(x);
            $('<li style="margin-left:-26px;" class="tab-' + x + '">' +
              ' <a data-toggle="tab" href="#tab-' + x + '" data-type="newvalue" aria-expanded="false"><i class="fa fa-minus-circle RemoveCurrency"  style="color:#c04552;margin-right: 10px;"></i> ' + name[x] + '</a>' +
              ' </li>'
             ).insertAfter($("#tab > li").eq(x - 1))
            $('<div class="tab-pane" id="tab-' + x + '">' +
              '<div class="col-md-6">' +
              '<h5><span class="semi-bold ">' + name[x] + ': </span>' +
              '<span class="bold color NewCurrencyName"  ></span></h5>' +
              '</div>' +
              '<div class="col-md-6">' +
              '<h3 class="semi-bold"> ' + change + ' ' + name[x] + '</h3>' +
              '<div class="input-group-btn DropDownForForms Closable CurrencyDropDown" id="CurrencyDropDown" >' +
              '<button type="button" class="btn btn-complete btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">' +
              '<span><strong>' + select_currency + '</strong></span>' +
              '<input type="hidden" value=" " class="form-control ignore Currency" name="Currency_ID" id="' + (x + 1) + '" onkeyup="return false" onkeydown="return false" required/></button>' +
              '<ul class="dropdown-menu" ><?php echo($list_curr); ?><li class="divider"></li><li><a class="LoadMore">' + more + '..</a></li></ul>' +
              '</div>' +
              '</div>' +
              '</div>' +
              '</div>').insertAfter($("#tab-" + (x - 1)));
        } else {
            $("#AddCurrency").addClass("ChangeColorAddCurrency");
            $("#CurrencyValidationAlert").addClass("alert-danger").empty().html(more_than_ten);
            $("#CurrencyValidationAlert").fadeOut(1600, "linear")
        }
    }
    
    function AddRow() {
        var TR = '<tr>'
        TR += '<td style="text-align:center"><div class="EditRow" onclick="EditMe(this)"><i class="fa fa-edit"></i> </div></td>'
        TR += '<td ><select  required name="from_currency" value=' + 0 + ' class="full-width from_currency " data-init-plugin="select2"><?php foreach ($all_currencies as $Currency): ?><option value="<?php echo $Currency['Currency_ID']; ?>"><?php echo $Currency['Currency_Name']; ?></option><?php endforeach; ?></select></td>'
        TR += '<td style="display:none"><input type="hidden" value=' + 0 + ' name="from_currency" class="from_currency" ></td>'
        TR += '<td><select  required name="to_currency"  value=' + 0 + ' class="full-width to_currency " data-init-plugin="select2"><?php foreach ($all_currencies as $Currency): ?><option value="<?php echo $Currency['Currency_ID']; ?>"><?php echo $Currency['Currency_Name']; ?></option><?php endforeach; ?></select></td>'
        TR += '<td style="display:none"><input type="hidden" value=' + 0 + ' name="to_currency" class="to_currency" ></td>'
        TR += '<td ><input type="text"  name="ExchRate" class="ExchRate"></td>'
        TR += '<td style="text-align:center;"></i><i class="fa fa-minus-circle DeleteRow" style="margin-left:5px;color:#ed5565"></i></td> '
        TR += '</tr>'
        TR = $(TR)
        $("#ExchangeRate tbody:last").append(TR);
        $('select[name=from_currency],select[name=to_currency]').select2()
        $('#ExchangeRate tbody tr ').each(function () {
            var me = $(this);
            me.on("change", "td>.from_currency", function () {
                var value = ($(this).val());
                $('select[name=from_currency]', me).attr("value", value)
                $('td > input.from_currency', me).attr("value", value)
            })
        })
        $('#ExchangeRate tbody tr ').each(function () {
            var me = $(this);
            me.on("change", "td>.to_currency", function () {
                var value = ($(this).val());
                $('select[name=to_currency]', me).attr("value", value)
                $('td > input.to_currency', me).attr("value", value)
            })
        })
    }
    $("#ExchangeRate").on("click", "td .DeleteRow", function (e) {
        $(this).parents("tr").remove();
    });
    $("#tab").on("click", "li a .RemoveCurrency", function (e) {
        var CurrentLi = $(this).parents('li');
        CurrentLi.remove();
        var value = $(this).parents('li a').attr('href');
        var number = value.substring(5, 6);
        var nextvalue = parseInt(number) - 1;
        // alert(nextvalue);
        var activetab = value.substring(0, 5) + nextvalue;
        $(value).remove();
        $("#tab-0").removeClass("active");
        $("#tab-" + nextvalue).addClass("active");
        $(".tab-" + nextvalue).addClass("active");
    });
    var ReturnItemTableBody = $("#ExchangeRate tbody");
    function EditMe(who) {
        var TR = $(who).parents("tr");
        $("tr.Edit", ReturnItemTableBody).each(function () {
        });
        if (TR.hasClass("Edit")) {
            $("tr", ReturnItemTableBody).attr("class", "")
        } else {
            $("tr", ReturnItemTableBody).attr("class", "Faded")
            TR.attr("class", "Edit").stop().css({opacity: 0}).animate({opacity: 1})
            var TheInput = $("<input type='text' class='ExchRate' class='form-control'  style='position:relative;z-index:99;width:40%;color: #fff;background-color: #6dc0f9;margin:0;display:inline-block' value='" + $(".ExchRate", TR).val() + "' />")
            $(".rate", TR).empty().append(TheInput)
            TheInput.on("keyup", function (e) {
                if (e.which == 13) {
                    EditMe($(this).parent());
                }
            }).focus()
            TheInput.get(0).selectionStart = 0;
            TheInput.get(0).selectionEnd = TheInput.val().length;
        }
    }
</script>