@extends('layouts.app')
@section('content')

@include('googleDashboards.modals.pbs_shopping_campaign')
@include('googleDashboards.modals.pbs_normal_campaign')
@include('googleDashboards.modals.csv_import_shopping_campaign')
@include('googleDashboards.modals.csv_import_normal_campaign')
@include('googleDashboards.modals.pms_shopping_campaign')
@include('googleDashboards.modals.pms_normal_campaign')
@include('googleDashboards.modals.auto_create_ads_settings')
@include('googleDashboards.modals.auto_create_ads_settings_form')

@include('googleDashboards.modals.device_csv_import')
@include('googleDashboards.modals.sku_tool')
@include('googleDashboards.modals.sku_tool_form')
@include('googleDashboards.modals.ad_schedule')

<div class="google-dashboard-container">
    <input id="auto_create_csrf_token" type="hidden" value="{{ csrf_token() }}">
    <div class="row mb-3">
        <div class="col-md-2">
            <h6 class="account" >Customers Accounts : </h6>
        </div>
        <div class="col-md-5">
            <form id="change-google-account" method="get">
                <select  class="form-control account"  name="whosaccount" id="account-number" >
                    @foreach ($prospectCredentialsList as $prospectCredential)
                    <option {{ $prospectCredential->account_number == $selectedProspectCredential ? 'selected' : '' }} value="{{ $prospectCredential->account_number }}">
                        {{ ucfirst($prospectCredential->account_name == '' ? $prospectCredential->name : $prospectCredential->account_name) . " (" . $prospectCredential->account_number . ")" }}
                    </option>
                    @endforeach
                </select>
            </form>
        </div>
    </div>
    <div class="container bg-white border border-3 border-dark px-4 py-2">
        @if ($accountDetails)
            @foreach($accountDetails as $accountDetail)
            <div class="row border border-1 border-dark my-2 p-3">
                <div class="col-3 d-flex align-items-center">
                    <div id="view_{{ $accountDetail->account_number }}" class="row text-center countView" data-isloaded="false" data-id="{{ $accountDetail->account_number }}">
                        <div class="col-6">Campaigns: <br/><span id="campaign_{{ $accountDetail->account_number }}" data-account-id="{{ $accountDetail->account_number }}">{{$accountDetail->num_of_campaigns}}</span></div>
                        <div class="col-6">Adgroups: <br/><span id="adgroup_{{ $accountDetail->account_number }}" data-account-id="{{ $accountDetail->account_number }}">{{$accountDetail->num_of_adgroups}}</span></div>
                    </div>
                </div>
                <div class="col-9">
                    <div class="row d-flex align-items-center">
                        <div class="col-3">
                            <div class="dropdown">
                                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownbiddingtool" data-bs-toggle="dropdown" aria-expanded="false">
                                    Bidding Tool
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownbiddingtool">
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pbs-shopping-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Populate Bidding Sheet - Shopping Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pbs-normal-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Populate Bidding Sheet - Normal Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#csv-import-shopping-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            CSV Import - Shopping Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#csv-import-normal-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            CSV Import - Normal Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pms-shopping-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Populate Modifier Sheet - Shopping Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#pms-normal-campaign" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Populate Modifier Sheet - Normal Campaigns
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#device-CSV-import" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Device CSV Import
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="dropdown">
                                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownshoppingads" data-bs-toggle="dropdown" aria-expanded="false">
                                    Shopping Ads
                                </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 Create Ads Settings
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item sku_tool" href="#" data-bs-toggle="modal" data-bs-target="#sku-tool-modal" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                            Sku Tool
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-2">
                            <a class="btn btn-secondary " href="#" data-bs-toggle="modal" data-bs-target="#ad-schedule" data-account-id="{{ $accountDetail->account_number }}" data-account-name="{{ $accountDetail->name }}">
                                AdSchedule
                            </a>
                        </div>
                        <div class="col-3">
                            <div class="info-area ps-3">
                                <div class="name badge rounded-pill bg-success">{{ $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 my-2 p-3">
            <div class="col-sm-5 col-md-4 col-lg-5">
            </div>
            <div class="col-sm-4 col-md-4 col-lg-3 d-flex align-items-center text-center">
                <a href="{{url('/googleDashboard/manageAccount')}}" type="button"  class="btn btn-sm btn-outline-secondary new_settings" >Manage Your GoogleAd Account
                    <!-- <span style="width: 1rem; height: 1rem;" class="createNewGoogleAd" role="status" aria-hidden="true"></span>
                    <span class="sr-only"></span> -->
                </a>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4">
            </div>
        </div>
        @endif
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(window).on('resize', LoadItemsInViewport);
        $(window).scroll($.debounce(150, LoadItemsInViewport));

        LoadItemsInViewport();
    });
    
    $.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"));
            }
        });
        
    }
    
</script>

@include('googleDashboards.js.js_pbs_shopping_campaign')
@include('googleDashboards.js.js_pbs_normal_campaign')
@include('googleDashboards.js.js_csv_shopping_campaign')
@include('googleDashboards.js.js_csv_normal_campaign')
@include('googleDashboards.js.js_auto_create_ads_settings')
@include('googleDashboards.js.js_auto_create_ads_settings_form')

@include('googleDashboards.js.js_pms_shopping_campaign')
@include('googleDashboards.js.js_pms_normal_campaign')
@include('googleDashboards.js.js_device_csv_import')
@include('googleDashboards.js.js_sku_tool')
@include('googleDashboards.js.js_sku_tool_form')
@include('googleDashboards.js.js_ad_schedule')
@endsection