<aura:component controller="AccountsController" implements="lightning:actionOverride,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >



     <aura:attribute name="accounts" type="Account[]"/>
     <aura:attribute name="accounts2" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


         <ui:button class="slds-align_absolute-center" label="Click Me To Popup!!!" press="{!c.openmodal}"  />
       <!-- this div gives a pop up of the page-->
          <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
       <div class="slds-modal__container" style="width: 10%;">
           <div class="slds-modal__header">
               EDIT
    <aura:iteration items="{!v.accounts}" var="account" indexVar="accountKey">
    <tr id="{!'tr'+accountKey}">
        <th> {!'tr'+accountKey} </th>
        <th scope="col">
            <ui:inputCheckbox Text="{!account}" aura:id="accountSelected" />
        </th>
        <th scope="col">
            <ui:outputText aura:id="Name" value="{!account.Name}"/>
        </th>
        <th scope="col">
            <ui:outputText aura:id="street" value="{!account.BillingStreet}"/>
        </th>
        <th scope="col">
            <ui:outputText aura:id="city" value="{!account.BillingCity}"/>
        </th>
        <th scope="col">
            <ui:outputText aura:id="state" value="{!account.BillingState}"/>
        </th>

    </tr>
</aura:iteration>
           </div>
<lightning:button variant="brand" label="Process" onclick="{!c.processButton}" />
                <div class="slds-modal__footer">
                    <ui:button label="close" press="{!c.closeModal}"  />
                </div>
            </div>
              </div>

        <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>

({
    closeModal:function(component,event,helper){
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
        },
    openmodal:function(component,event,helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.addClass(cmpTarget, 'slds-fade-in-open');
        $A.util.addClass(cmpBack, 'slds-backdrop--open');
    },
    Submitmodal:function(component,event,helper){
         var tes1=component.get("v.test1");
         var tes2=component.get("v.test2");
         console.log(tes1);
         console.log(tes2);

    },
    doInit: function(component, event, helper) {
        var action = component.get('c.getAccounts');
        console.log(action);
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.accounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    processButton: function(component, event, helper) {
        debugger;
        console.log("this is logo");
        var le = component.find("accountSelected").length;
        console.log(le);
        for( var i=0; i < component.find("accountSelected").length; i++) {
            if( component.find("accountSelected")[i].get("v.value") == true ){
                var element = document.getElementById('tr'+i);
                console.log('tr'+i);
                element.style.backgroundColor='#800';
                element.style.color='white';
                element.style.textAlign='center';
                Console.log("here I wan to get selected accounts ");
                ****<!--  How can i get the accounts values selected ones  -->****

            } else {
                var element = document.getElementById('tr'+i);
                element.style.backgroundColor='#fff';
                element.style.color='black';
                element.style.textAlign='center';
            }
        }
    }

})