@extends('layouts.app')

@section('content')
List of Registered companies <span class="linksdivider"></span> <span class="linkeffect trigger_createnewaccount">Create Account</span> <br>
<div style="background:white;width:99%;padding:10px;border-radius:5px;">
    <table width="100%" class="table table-bordered table-striped table-hover">
        <tr width='100%' class="trheader">
            <th width='25%'>Company Name</th>
            <th width='20%'>Email</th>
            <th width='10%'>Users</th>
            <th width='10%'>Apps</th>
            <th width='10%'>Tasks</th>
            <th width='10%'>Projects</th>
            <th width='10%'>Tickets</th>
            <th width='5%'></th>
        </tr>

        @foreach($accountlist as $accountlist)
                        <tr width='100%' style="font-size:14px;">
                <td>
                     {!! str_replace('companyname_newadminacnt##-arraydivider-##', ' ', $primarydetails[0]) !!}
                 </td>
                <td>{{$accountlist->email}}</td>
                <td class='userscount' companyid='{{$accountlist->companyid}}'><u class='linkeffect'>0</u></td>
                <td><u class='linkeffect loadappslist loadappscounter' pastecounter='{{$accountlist->companyid}}' companyid='{{$accountlist->companyid}}'>0</u></td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td style="text-align:right;"><span class="editicon_holder edit_adminaccount linkeffect" _id='{{$accountlist->companyid}}' style="color:coral;"></span> <span class="trashicon_holder" style="color:red;"></span></td>
            </tr>
        @endforeach
    </table>
</div>

<script type="text/javascript">
    $( document ).ready(function() {
        // hide body; and after all the manipulations and arrangement we then place the body back
        // $("body").hide();
        var editicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-pen' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

        var trashicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-trash' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

        var increaseicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-arrow-up' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 3.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5z'/><path fill-rule='evenodd' d='M7.646 2.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8 3.707 5.354 6.354a.5.5 0 1 1-.708-.708l3-3z'/></svg>";

        var linksdivider = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-dot' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/></svg>";

        $(".editicon_holder").html(editicon);
        $(".trashicon_holder").html(trashicon);
        $(".change_percentage").html(increaseicon);
        $(".linksdivider").html(linksdivider);

        // this is to do the user count for all the companies available 
        $('.userscount').each(function (index) {
            var wrap = $(this);
            var companyid = $(this).attr("companyid");
            
            var baseURL = $(".baseURL").attr("baseURL");
            var baseURL = baseURL+"/loadusercount";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type:'POST',
                url:baseURL,
                data:{companyid:companyid},
                success:function(data){
                var data = data.trim();
                // alert(data);
                $(wrap).html("<u class='linkeffect redirect_userslist_page' profileid='"+companyid+"'>"+data+"</u>");
              }
            });
        });

        // this is to load the total number of apps on each company account loadappscounter
        $('.loadappscounter').each(function (index) {
            var companyid = $(this).attr("companyid");

            var baseURL = $(".baseURL").attr("baseURL");
            var baseURL = baseURL+"/load_totalappscount";
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type:'POST',
                url:baseURL,
                data:{companyid:companyid},
                success:function(data){
                var data = data.trim();
                // alert(data);
                $("[pastecounter="+companyid+"]").html(data);
                
                // $(wrap).html("<u class='linkeffect redirect_userslist_page' profileid='"+companyid+"'>"+data+"</u>");
              }
            });

        });
    });

    // this is to pop the form to create a new company account trigger_createnewaccount
    $(document).on("click", '.trigger_createnewaccount', function(event) {
        
        widthbody = $("body").width();
        halfwidth = widthbody/2
        halfwidth = halfwidth - 200;
        
        var form_list = "<table width='100%' style='margin-bottom:10px;'><tr class='trheader' width='100%'><td width='90%'>Create New Account</td> <td width='10%' class='linkeffect close_form_fornewaccount_wrapper' style='text-align:right;'>x</td></tr></table>";
            form_list += "<span class='companyname_name_holder'>Company Name</span><br><input type='text' class='registerform-input-ajaxform companyname_newadminacnt clrfield' style='width:100%'>";
            form_list += "<span class='email_name_holder'>Email</span><br><input type='email' class='registerform-input-ajaxform username_data email_newadminacnt clrfield' actiontype='email' style='width:100%'>";
            form_list += "<span class='username_name_holder'>Username</span><br><input type='text' class='registerform-input-ajaxform username_data username_newadminacnt clrfield' actiontype='username' style='width:100%'>";
            form_list += "<span class='password_name_holder'>Password</span><br><input type='text' class='registerform-input-ajaxform thepassword clrfield' style='width:100%'>";
            form_list += "<span class='confirmpassword_name_holder'>Confirm Password</span><br><input type='text' class='registerform-input-ajaxform theconfirm_forpassword clrfield' style='width:100%'>";
            form_list += "<p></p>";
            form_list += "<span class='linkeffect createnew_adminaccount'>Create Account</span>";

        $("body").after("<div class='ajax_new_account-wrapper' style='position:absolute;background:white;box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);width:400px; margin-top:100px; border-radius:5px;padding:5px; margin-left:"+halfwidth+"px;'>"+form_list+"</div>")
    });

    // this is to close the form popup close_form_fornewaccount_wrapper 
    $(document).on("click", '.close_form_fornewaccount_wrapper', function(event) {
        $(".ajax_new_account-wrapper").remove();
    });

    // this is to submit and create a new company/admin account
    $(document).on("click", '.createnew_adminaccount', function(event) {
        // remove all errors
        $(".error__").remove();
        var errorArray_enwaccount = Array();
        var thepassword = $(".thepassword").val();
        var theconfirm_forpassword = $(".theconfirm_forpassword").val();
        var companyname_newadminacnt = $(".companyname_newadminacnt").val();
        var email_newadminacnt = $(".email_newadminacnt").val();
        var username_newadminacnt = $(".username_newadminacnt").val();

        if(thepassword == '' || theconfirm_forpassword == '' || companyname_newadminacnt == '' ||  email_newadminacnt == '' || username_newadminacnt == ''){
            errorArray_enwaccount[errorArray_enwaccount.length] = "notallinputfilled";
        }

        if(thepassword != theconfirm_forpassword){
            errorArray_enwaccount[errorArray_enwaccount.length] = "notequalpassword";
        }


        if(errorArray_enwaccount.length > 0){
            alert(errorArray_enwaccount);
            // return;
        }
        
        var baseURL = $(".baseURL").attr("baseURL");
        var baseURL = baseURL+"/createnewadminaccount";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type:'POST',
            url:baseURL,
            data:{thepassword:thepassword, companyname_newadminacnt:companyname_newadminacnt, email_newadminacnt:email_newadminacnt, username_newadminacnt:username_newadminacnt},
            success:function(data){
            $(".error__").remove();
            
            if(data.checker == 'yes'){
                // alert(data.username);
                // alert(data.email);
                if(data.username > 0){
                    $(".username_name_holder").after("<span class='error__' style='font-size:13px;color:orangered;padding-left:10px;'>This username is already in use.</span>");
                }

                if(data.email > 0){
                    $(".email_name_holder").after("<span class='error__' style='font-size:13px;color:orangered;padding-left:10px;'>This email is already in use.</span>");
                }
            }else{
                var data = data.split("#####");
                if(data[0] = 'done'){
                    var editicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-pen' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z'/><path fill-rule='evenodd' d='M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z'/><path d='M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z'/></svg>";

                    var trashicon = "<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-trash' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z'/><path fill-rule='evenodd' d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z'/></svg>";

                    $(".clrfield").val("");
                    // alert(email_newadminacnt);
                    
                    var tdd = "<td>"+companyname_newadminacnt+"</td>";
                        tdd += "<td>"+email_newadminacnt+"</td>";
                        tdd += "<td>0</td>";
                        tdd += "<td>0</td>";
                        tdd += "<td>0</td>";
                        tdd += "<td>0</td>";
                        tdd += "<td>0</td>";
                        tdd += "<td style='text-align:right;'><span class='editicon_holder edit_adminaccount' _id='"+data[1]+"' style='color:coral;'>"+editicon+"</span> <span class='trashicon_holder' style='color:red;'>"+trashicon+"</span></td>";

                    var newrow = "<tr style='font-size:13px;'>"+tdd+"</tr>";
                    $(".trheader").after(newrow);
                    $(".ajax_new_account-wrapper").remove();
                }
            }
            

          }
        });
    });

    // this is to check if the username already exists in the database 
    $(document).on("change", '.username_data', function(event) {
        $(".error__").remove();
        var username_data = $(this).val();
        var actiontype = $(this).attr("actiontype");

        var baseURL = $(".baseURL").attr("baseURL");
        var baseURL = baseURL+"/checkifusername_unique";
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type:'POST',
            url:baseURL,
            data:{username_data:username_data, actiontype:actiontype},
            success:function(data){
            var data = data.trim();

            if(actiontype == 'username'){var destination = "username_name_holder";}
            if(actiontype == 'email'){var destination = "email_name_holder";}

            if(data == 1){
                $("."+destination).after("<span class='error__' style='font-size:13px;color:orangered;padding-left:10px;'>This "+actiontype+" is already in use.</span>");
            }
          }
        });
    });

    // this is to load the profile page of the company edit_adminaccount
    $(document).on("click", '.edit_adminaccount', function(event) {
        var APP_URL = {!! json_encode(url('/')) !!};
        var id = $(this).attr("_id");
        // alert(APP_URL);
        window.location.replace(APP_URL+"/profile/"+id);
    });

    // this is to redirect to page of list of apps loadappslist
    $(document).on("click", '.loadappslist', function(event) {
        var APP_URL = {!! json_encode(url('/')) !!};
        var companyid = $(this).attr("companyid");
        // alert(APP_URL);
        window.location.replace(APP_URL+"/apps/"+companyid);
    });
</script>
@endsection