@extends('layouts.app')
@section('content')
@include('bingDashboards.modals.auto_create_ads_settings')
@include('bingDashboards.modals.auto_create_ads_settings_form')

<div class="container">
    <input type="hidden">
    <div class="row mb-4">
        <div class="col-md-2">
            <h6 class="account">Customers Accounts :</h6>
        </div>
        @if ($prospectDetails)
        <div class="col-md-5">
            <form action="" id="change_account" method="get">
                <select class="form-control account" name="whosaccount" id="whosaccount">

                    @foreach ($prospectDetails as $prospectCredential)

                    <option selected="" value="{{$prospectCredential->account_number}}">{{
                        ucfirst($prospectCredential->account_name == '' ? $prospectCredential->name :
                        $prospectCredential->account_name) . " (" . $prospectCredential->account_number . ")" }}
                    </option>

                    @endforeach
                </select>
            </form>
        </div>
        @endif
        <div class="col-md-5">
            <h4 class="account text-end">Show Inactive Accounts: <input type="checkbox" class="active"
                    data-toggle="tooltip" title="Show Inactive accounts" data-placement="right"
                    id="show_inactive_account"></h4>
        </div>
    </div>

    <div class="container bg-white border border-3 border-dark px-4 py-2">
        @if ($accountDetails)
        @foreach($accountDetails as $accountDetail)


        <div class="inner-box row border border-1 border-dark my-2 p-3 {{($accountDetail['status'] == 1) ? "
            actie_accounts" : "inactive_accounts hide" }}">
            <div class="col-5 d-flex align-items-center">
                <div class="row text-center countView" data-isloaded="false">
                    <div class="col-6">Campaigns: <br /><span>{{ $accountDetail->num_of_campaigns }}</span></div>
                    <div class="col-6">Adgroups: <br /><span>{{ $accountDetail->num_of_adgroups }}</span></div>
                </div>
            </div>

            <div class="col-7">
                <div class="row d-flex align-items-center">
                    <div class="col-7 text-center">
                        <div class="#auto-create-ads-settings">
                            <a class="btn btn-secondary" href="#" data-bs-toggle="modal" data-bs-target="#auto-create-ads-settings" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                           Auto Ad Tool
                            </a>
                            
                            <!-- <ul class="dropdown-menu" aria-labelledby="dropdownshoppingads">
                            <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#auto-create-ads-settings" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                           Auto Ad Tool
                                        </a>
                                    </li>

                            </ul> -->
                        </div>
                    </div>



                    <div class="col-5">
                        <div class="info-area ps-3">

                            <div class="name badge rounded-pill {{($accountDetail['status'] == 1) ? " bg-success"
                                : "bg-danger" }} text-wrap">{{ $accountDetail->name }}</div>
                            <div class="account_number">{{ $accountDetail->account_number }}</div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div> @endforeach
        @else
        <div class="row text-center alert alert-danger mb-0">
            <div class="col-12">
                <span class="">No accounts</span>
            </div>
        </div>
        @endif
        @if(Config::get('constants.authURLS.isauthButtonShow') == 1)
        <div class=" row border border-1 border-dark p-3">
            <div class="col-5"></div>
            <div class="col-3">
                <a href="">
                    <a type="button" class="btn btn-secondary discount-btn2 text-wrap" href="{{url('/bing/authenticate')}}">Manage
                        Your Bing Accounts</a>
                </a>
            </div>
            <div class="col-4">
            </div>
        </div>
        @endif
    </div>
</div>

             <script type="text/javascript">

//         var myDropzone = new Dropzone("#upload");
//         myDropzone.
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();

var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();

return elementBottom > viewportTop && elementTop < viewportBottom;
};

function LoadItemsInViewport() {
var inView = [];
$('.countView').each(function (i, e) {
if ($(e).isInViewport() && $(e).attr("data-isloaded")=="false") {
    inView.push($(e).attr("data-id"));
}
});
if (inView.length > 0) {
// getBingCampaingAdGroupsData(inView);
}
console.log(JSON.stringify(inView));
}

$(document).ready(function () {
                        $("#whosaccount").change(function () {
                            $("#change_account").submit();
                        });
                        $(".inactive_accounts").addClass("hide");
                        $("#show_inactive_account").change(function () {
                           if($("#show_inactive_account").is(":checked")){
                               $(".inactive_accounts").removeClass("hide");
                           }else{
                               $(".inactive_accounts").addClass("hide");
                            }
                            LoadItemsInViewport();
                        });
                    })
</script>


@include('bingDashboards.js.js_auto_create_ads_settings')
@include('bingDashboards.js.js_auto_create_ads_settings_form')
@endsection